javascript - HideShow Element with jQuery

I'm trying to learn jQuery and Javascript. I want to hide and show a Div Element (div2) with a button on a webpage using a button I have placed on the page. However, I want the jQuery code to be placed in a separate file referenced later on (like a custom .css file). Here's my basic code:

#div1{
	background-color: aquamarine;	
}

#div2{
	background-color: firebrick;	
}

#hide_show{
	
background-color: cornflowerblue;
	
}

<html>
	
	<head>
		
			
    <link href="special.css" rel="stylesheet" type="text/css">
		
		</head>

	<body>		

		<div id ="div1">
			
			this is a container
			
		</div>
		
		<div id = "div2">
		
			This is another div.
		
		</div>
		
		<button type="button" id ="hide_show">Click Me!</button>
	

	</body>
	
</html>

#div1{
	background-color: aquamarine;	
}

#div2{
	background-color: firebrick;	
}

#hide_show{
	
background-color: cornflowerblue;
	
}

<html>
	
	<head>
		
			
    <link href="special.css" rel="stylesheet" type="text/css">
		
		</head>

	<body>		

		<div id ="div1">
			
			this is a container
			
		</div>
		
		<div id = "div2">
		
			This is another div.
		
		</div>
		
		<button type="button" id ="hide_show">Click Me!</button>
	

	</body>
	
</html>

Referencing the file isn't an issue. However, how do I go ahead with writing the Javascript file? Also, does the text editor of your choice affect how Javascript is executed on the website? I'm currently using codeblocks.

Thanks.

Share Improve this question edited Jul 27, 2018 at 18:21 asked Jul 27, 2018 at 18:08 Hamza 591 gold badge2 silver badges8 bronze badges

3 head tag should be out of body tag – Zakaria Acharki Commented Jul 27, 2018 at 18:11
html syntax is invalid . You need to fix that first . use website fixmyhtml. . Then you can use id as selector to hide and show . $('#div2').hide() – Abhishek Sinha Commented Jul 27, 2018 at 18:16
Oh didn't see that. Thanks for the heads up. – Hamza Commented Jul 27, 2018 at 18:17
No, CodeBlocks won't affect your file. – Victoria Ruiz Commented Jul 27, 2018 at 18:20

Add a ment |

6 Answers 6

Sorted by: Reset to default 3

html syntax is invalid . You need to fix that first . use website http://fixmyhtml. then use you can write jquery

$('#hide_show').click(function(){
  $('#div2').toggle();
});

Hi so your html file should first reference Jquery then in your JS file you can do:

$('#hide_show').on('click', function(event){
  $('#div2').hide();
});

$('#hide_show').click(()=>{ // subscribe to button click event
     $('#div2').fadeToggle(); // animate show hide toggle
     // $('#div2').toggle(); // without animation effect
});

Methods .fadeToggle() or .toggle() might help.

A good method to use in this case would be .toggle(). It basically applies .show() if element is hidden and .hide() if its shown.

Example:

$(document).on('click', 'button', e => {
  $($(e.target).data('target')).toggle();
});

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

<button type="button" data-target="#div1">Toggle #div1</button>
<button type="button" data-target="#div2">Toggle #div2</button>

<div id="div1">
  this is a container.
</div>
<div id="div2">
  This is another div.
</div>

You'll also notice I'm getting the targeted element for the action from the clicked element, dynamically (the click event gets passed to the function and its target property references the target of the event. $(e.target).data('target') basically reads the data-target attribute of the clicked element), so the above code will make any number of buttons work, without any modifications.

<button type="button" data-target="#div3">Toggle #div3</button>

... will toggle any element with id="div3".

Going further, you might not want this behavior bound on all your buttons that happen to have a data-target attribute. So let's limit it to only buttons that have a toggler class and that also have a data-target attribute:

$(document).on('click', 'button.toggler[data-target]', e => {
  $($(e.target).data('target')).toggle();
});

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

<button class="toggler" type="button" data-target="#div1">Toggle #div1</button>
<button type="button" data-target="#div2">Toggle #div2</button>

<div id="div1">
  this is a container.
</div>
<div id="div2">
  This is another div.
</div>

As you can see, now only the first button works, because the second one doesn't meet the conditions for the selector: button.toggler[data-target] (it doesn't have the toggler class - but if you do add it, it will start working).

Besides .toggle(), .show() and .hide() methods which simply change the display property of the element, jQuery es with two helper classes for toggling display: fading and sliding, each with its own specific methods.

For questions like these, I would remend you the website https://w3schools..

It will tell you how to properly include the JQuery library and and is a good reference site for programming syntax.

For example, on https://www.w3schools./jquery/jquery_get_started.asp ,it says:

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Both Google and Microsoft host jQuery.

To use jQuery from Google or Microsoft, use one of the following:

Google:

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

Microsoft:

<script src="https://ajax.aspnetcdn./ajax/jQuery/jquery-3.3.1.min.js"></script>

Also, https://www.w3schools./jquery/eff_toggle.asp tells you how to use the toggle method which actually has a lot of tidbits some people would not normally know

Hide show element on button click
In this example I use one single function for hide show element on click so I can use this function multiple time. by passing parameter on any button click function

let CustomeToggle = (divId,readMoreText)=>{
            divId.toggle();
            switch($(readMoreText).text()){
                case 'Read more':
                $(readMoreText).text('Less')
                break;
                case 'Less':
                $(readMoreText).text('Read more')
                break;
                case 'view more':
                $(readMoreText).text('less view')
                break;
                case 'less view':
                $(readMoreText).text('view more')
                break;
                default:
                $(readMoreText).text('Read More')   
            }
        }

        $('#alphaReadmore').click(function(){
            CustomeToggle($('.FirstDiv'),this)
        })

        $('#count_viewmore').click(function(){
            CustomeToggle($('.secondDiv'),this)
        })

a{
 color:blue;
 display:block;
 margin-top:15px;
 cursor: pointer
}

<script src="https://code.jquery./jquery-3.5.1.min.js"></script>
<p>A B C D<span class="FirstDiv" style="display: none;"> E F G H</span>
<br>
<a id="alphaReadmore">Read more</a> 
</p>

<br><br>

<p>1 2 3 4 5<span class="secondDiv" style="display: none;"> 6 7 8 9 10</span>
<br>
<a id="count_viewmore">view more</a> 
</p>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HideShow Element with jQuery - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)