Hide/Show Element with jQuery
Question
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>
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.
6 answers
solution1
2 2018-07-27 18:13:09
$('#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.
solution2
2 2018-07-27 18:15:50
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();
});
solution3
2 2018-07-27 18:23:45
html syntax is invalid . You need to fix that first . use website http://fixmyhtml.com then use you can write jquery
$('#hide_show').click(function(){
$('#div2').toggle();
});
solution4
1 2018-07-27 18:29:44
For questions like these, I would recommend you the website https://w3schools.com .
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.com/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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Also, https://www.w3schools.com/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
solution5
1 2018-07-27 18:30:54
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.com/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.com/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 comes with two helper classes for toggling display: fading and sliding , each with its own specific methods.
solution6
0 2020-12-31 12:03:53
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.com/jquery-3.5.1.min.js"></script> <p>ABC D<span class="FirstDiv" style="display: none;"> EFG 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.