how to manage hide and show multiple div and sections using jquery
Use a class, say, .hideShow
in the elements on which you want to hide or show them in the HTML. Change your code to:
HTML
<div id="gridID" class="card chartsGridhights hideShow" style="width:49%;float:left;display:none">
<div id="pieChartID" class="card hideShow" style="float:left;width:20%;display:none">
<div id="faultStatChartID" class="card hideShow" style="width:55%;float:right;margin-right:2%;display:none;">
<div id="btnCurrentStatID" class="card hideShow" style="float:right;width:20%;height:350px;display:none;">
JQUERY
$("#btnFilter").click(function () {
$(".hideShow").css("display", "block");
//or $(".hideShow").show();
});
Using class
selector is more flexible and reduce a large number of code as compared to using an id
selector for display block in your case.
jQuery - Show one DIV and hide multiple others
- Add Common Class to all the tab headers
- Add
data-target
attribute to show the element when clicked on tab-header - Group all the tab-contents inside on container
See the changes highlighted in HTML
and inline comments in Javascript
.
Html:
<div class="pageTabs">
<div class="tabs">
<span id="overview-btn" class="active tabHeader" data-target="#overview-section">Overview</span>
// ^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<span id="itinerary-btn" class="tabHeader" data-target="#itinerary-section">Full Itinerary</span>
// ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
<span id="map-btn" class="tabHeader" data-target="#map-section">Map</span>
// ^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^
</div>
</div>
<div class="content">
<div class="overview" id="overview-section">
<p>Intro 1</p>
<p>Intro 2</p>
<p>Intro 3</p>
</div>
<div class="itinerary" id="itinerary-section">
<div class="heading">Day 1</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 2</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 3</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 4</div>
<p>blah blah blah</p>
<hr>
<div class="heading">Day 5</div>
<p>blah blah blah</p>
<hr>
</div>
<div class="map" id="map-section">map here...</div>
</div>
Javascript:
$(document).ready(function () {
// When tab-header is clicked
$('.tabHeader').on('click', function () {
// Add active class to the clicked element, and remove from other tab-headings
$(this).addClass('active').siblings().removeClass('active');
// Get the target element show it and hide other tab-contents
$($(this).data('target')).show().siblings().hide();
});
});
Demo: https://jsfiddle.net/tusharj/p9bnq8dp/2/
Show Hide multiple Divs only one at a time - Jquery
Can use indexing assuming they all stay in 1:1 order in page
var $links = $('[id^=linktodiv]'),// cache elements to variables
$content = $('[id^=window]');
$links.click(function(){
// hide all content, show matching index content window
$content.hide().eq( $links.index(this) ).show();
});
Will be very helpful to give each common component a common class
DEMO
Show/Hide Multiple Divs with Jquery
jQuery(function() { jQuery('#showall').click(function() { jQuery('.targetDiv').show(); }); jQuery('.showSingle').click(function() { jQuery('.targetDiv').hide(); jQuery('#div' + $(this).attr('target')).show(); });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="buttons"> <a id="showall">All</a> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a></div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div><div id="div2" class="targetDiv">Lorum Ipsum2</div><div id="div3" class="targetDiv">Lorum Ipsum3</div><div id="div4" class="targetDiv">Lorum Ipsum4</div>
Onclick Show / Hide Multiple Divs Jquery
You should use data attributes, as just target
is'nt really valid. I changed it to data-target
and did:
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
FIDDLE
on()
will only work in jQuery 1.7+, so if using an older version of jQuery (your fiddle is), stick with click()
.
Show/Hide Div Combinations jQuery
to select all divs that are not #div1 you can use css not selector in jquery like this and then hide/toggle it.
jQuery("#parentcontainer div:not(#div1)").hide();
$("#div1trigger").click(function(){ $("#div1").toggle(); $("#parentcontainer div:not(#div1)").hide();});$("#div2trigger").click(function(){ $("#div2").toggle(); $("#parentcontainer div:not(#div2)").hide();});$("#div3trigger").click(function(){ $("#div3").toggle(); $("#parentcontainer div:not(#div3)").hide();});$("#div4trigger").click(function(){ $("#div4").toggle(); $("#parentcontainer div:not(#div4)").hide();});$("#div5trigger").click(function(){ $("#div5").toggle(); $("#parentcontainer div:not(#div5)").hide();});
.hide { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="div1trigger">Div 1 Trigger</div><div id="div2trigger">Div 2 Trigger</div><div id="div3trigger">Div 3 Trigger</div><div id="div4trigger">Div 4 Trigger</div><div id="div5trigger">Div 5 Trigger</div>
<div id='parentcontainer'> <div id="div1" class='hide'>div 1 display</div> <div id="div2" class='hide'>div 2 display</div> <div id="div3" class='hide'>div 3 display</div> <div id="div4" class='hide'>div 4 display</div> <div id="div5" class='hide'>div 5 display</div></div>
Jquery hide and show multiple elements same page
The reason that the click hides all the tr_more
elements is because in your code, you are hiding and showing all the elements with the class tr_more
irrespective of which table it is.
One approach would be to select the tr_more
element which is part of the table which you are clicking by using the closest()
to find the parent table and then using find()
to get the tr_more
elements of that particular table that is clicked. Try the below code.
<script>
jQuery(document).ready(function($) {
$('.tr_more').hide();
$(".clickable-more").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').show();
$(this).next('a').show();
});
$(".clickable-minus").on('click', function() {
$(this).hide();
$(this).closest('table').find('.tr_more').hide();
$(this).prev('a').show();
});
});
</script>
A better approach would be to use jquery toggleClass
to toggle a class name for the tr_more
elements and change the display property for that class name using css. Not the exact code below, but it's a start
.tr_more.show {
display: block;
}
$('.clickable-more').on('click', function() {
$(this).closest('table').find('.tr_more').toggleClass('show');
})
Related Topics
Javascript: Location.Href to Open in New Window/Tab
Show Base64 Pdf Data Using Window.Open on Chrome New Version
How to Style HTML Select Option Hover and Selected Option Effects
To Get a Popup Message After Submit
Fetch() Unexpected End of Input
Check If Json Response Data Is Empty
How to Get Full Path of Selected File on Change of <Input Type='File'> Using Javascript, Jquery-Ajax
Regex to Find Json Values Without Quotes
Regex Pattern to Match At Least 1 Number and 1 Character in a String
React-Router Urls Don't Work When Refreshing or Writing Manually
How to Have Multiple Buttons of Same Id Value and When Click on Any Button the Pop-Up Should Come
Random Numbers Between 1 and 50; 50 Times
Postman: How to Check Whether the Field Is Returning Null in the Postman Automation
Pass Dynamic Object in Onclick - Javascript/Jquery
How to Add Node Module to Angular Project If Is Not Schematics Enabled
Changing the Value of Json Object's Key, Changes Other Values Also
Javascript Function Not Defined Error (But It Is Defined)
Typeerror: Router.Use() Requires Middleware Function But Got a Object