Clever Geek Handbook

How to hide a certain style when I click a button and show a different style

* {
	margin: 0;
	padding: 0;
}

#logo {
	width: 100%;
	text-align: center;
}

#logocaption {
	text-align: center;
	width: 100%;
}

#page1caption {
	text-align: center;
	padding: 0 0 20px 0;
}

#next1 {
	background-color: transparent;
	border-radius: 6px;
	border: solid 3px;
	display: block;
	margin: 0 auto;
	padding: 20px 50px 20px;
}

button:focus { 
	outline:0 !important; 
}

#next1:hover {
	background-color: black;
	color: white;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html>
	<head>
		<title>Template One</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="author" content="Carl Hansen">
		<link rel="stylesheet" type="text/css" href="CSS/styles.css">
		<link rel="stylesheet" type="text/css" href="CSS/MEDIAQ/mediaqueries.css">
		<script src="button.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<title>Web4Ever</title>
	</head>

	<body>
		<div class="container">
			<div id="page1">
				<div id="logo"><img src="logo.jpg"></div>
				<h1 id="logocaption">THE FUTURE <br> IS WEIRD</h1>
				<br>
				<p id="page1caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br>
				luctus tristique. Proin vel consectetur feugiat sed adipiscing.</p>
				<button id="next1">Next  <span class="glyphicon glyphicon-chevron-right"></span></button>
			</div>

			<div class="page2">
				
			</div>

			<div class="page3">
				
			</div>

			<div class="page4">
				
			</div>
		</div>
	</body>
</html>
Run codeHide result


When I click on my button, I want to hide my current style and display a different style that was previously hidden. Heres what i want, when i click on the first button it will hide # page1 and display # page2 so on and so forth. while I havent clicked on buttons on individual pages, other pages are hidden until I click on them, so this is basically like a carousel in a complex way

+3


source to share


3 answers


I think you need jQuery RemoveClass

in your case click the delete class button you don't want ...



eg:

<div id="mycontent"> My content</div>
<button id="someEvent">Next</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#someEvent").on('click', function(){
       $("#mycontent").removeClass('class_name') /* if you want to remove some style under class */
       $("#mycontent").addClass('class_name') /* if you want to show or add class */
    })
</script>
+1


source


Not sure what your needs are, but it looks like it jQuery

might be what you are looking for. It is a library javascript

specially designed to simplify such tasks.

Here I use the methods click

and toggleClass

to switch styles.

Hope this helps!



$("#example").on('click', function() {
  $(this).toggleClass("foobar");
})
      

        
        
        
      

    
#example {
  color: #555;
  font-size: 20px;
  padding: 10px;
}

.foobar {
  color: coral;
  border: 2px solid coral;
  padding: 10px;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="example">Click Me</div>
Run codeHide result


Edit: for this and any other jQuery

to work, you have to link to the library jQuery

in html

. If you are using cdn, just put the following between <head>

your html tags :

 <script
  src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+1


source


I tried with your code and I did it in the following way using jquery. You can see that I am using the click event on buttons to show / hide pages.

            $(function () {
                $('.page-block').hide();
                $('#page1').show();
                $(".btn").click(function (e) {
                    var pageId = $(e.target).data('target');
                    $('.page-block').hide();
                    $('#' + pageId).show();
                });
            });
      

        
        
        
      

    
* {
	margin: 0;
	padding: 0;
}

.c-btn {
margin-left: 10px;
}
      

        
        
        
      

    
<!DOCTYPE html>
<html>
    <head>
        <title>Template One</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Carl Hansen">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
            crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
            crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
        <title>Web4Ever</title>

    </head>
       <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 page-block text-center" id="page1">
                    <h3>Page 1</h3>
                    <p id="page1caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> luctus tristique. Proin vel consectetur feugiat sed adipiscing.</p>
                </div>
                <div class="col-sm-12 page-block text-center" id="page2">
                    <h3>Page 2</h3>
                    <p id="page2caption">Page 2, Page 2, Page 2d <br> Page 2e. Proin vel consectetur feugiat sed adipiscing.</p>
                </div>
                <div class="col-sm-12 page-block text-center" id="page3">
                    <h3>Page 3</h3>
                    <p id="page3caption">Page 3it amet, consectetuPage 3elit, sed do eiusmod <br> luctus tristique. Proin vel consectetur feugiat sed adipiscing.</p>
                </div>
                <div class="col-sm-12 page-block text-center" id="page4">
                    <h3>Page 4</h3>
                    <p id="page4caption">Page 4 Page 4m doPage 4or Page 4 amet, consectetur adipisicing elit, sed do eiusmod <br> luctus tristique. Proin vel consectetur feugiat
                        sed adipiscing.</p>
                </div>
            </div>
            <div class="row" style="margin-top: 25px;">
                <div class="col-sm-12 text-center">
                    <button data-target="page1" class="btn btn-primary c-btn" id="btn-1" >Page 1</button>
                    <button data-target="page2" class="btn btn-primary c-btn" id="btn-2" >Page 2</button>
                    <button data-target="page3" class="btn btn-primary c-btn" id="btn-3" >Page 3</button>
                    <button data-target="page4" class="btn btn-primary c-btn" id="btn-4" >Page 4</button>
                </div>
            </div>
        </div>

    </body>

</html>
Run codeHide result


+1


source






More articles:


All Articles