Geek Answers Handbook

JQuery onclick show / hide multiple divs

I am trying to learn some jQuery and, I see, I haven’t learned anything from my last questions and answers, since I cannot figure out how to do the following:

https://jsfiddle.net/9eofcw7w/

Yes, it works, but such code is simply messy and not professional:

$('#tab1').click(function () { $('#tab2show').hide(); $('#tab3show').hide(); $('#tab4show').hide(); $('#tab5show').hide(); $('#tab1show').show(); });

How can I make the code above with multiple jQuery lines instead of what I have right now?

+5
source share
4 answers

The problem with your code is that you are repeating the same block of code for each element, instead you can use some common attributes to reduce individual handlers like

First, we add a common class to all tab elements, such as tab , then we add another tab-content class to all content elements, this will help us to easily select these elements.

Then the logic we are looking for is that we only need to show that content , whose identifier matches the pressed tab (content identifier <clicked tab id> + 'show' ).

Now we can have one click handler that will target all tab elements in which we combine its identifier with 'show' to find the content that will be displayed and displays it through .show() , then we hide all the others tab-content .

Also note that we can cache the jQuery tab-content object for future reference.

 var $contents = $('.tab-content'); $contents.slice(1).hide(); $('.tab').click(function() { var $target = $('#' + this.id + 'show').show(); $contents.not($target).hide(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="tab1" class="tab">Test 1</div> <div id="tab2" class="tab">Test 2</div> <div id="tab3" class="tab">Test 3</div> <div id="tab4" class="tab">Test 4</div> <div id="tab5" class="tab">Test 5</div> <br /> <br /> <div id="tab1show" class="tab-content"> test 1 default = show </div> <div id="tab2show" class="tab-content"> test 2 </div> <div id="tab3show" class="tab-content"> test 3 </div> <div id="tab4show" class="tab-content"> test 4 </div> <div id="tab5show" class="tab-content"> test 5 </div>
+9
source

The following is one approach:

First add a wrapper div over the divs that you click. This will make it easier to add event handlers:

 <div id="clicks"> <div id="tab1">Test 1</div> <div id="tab2">Test 2</div> <div id="tab3">Test 3</div> <div id="tab4">Test 4</div> <div id="tab5">Test 5</div> </div>

Then wrap all your divs that you show / hide with another div. This will make it easier to show / hide all divs:

 <div id="tabShows"> <div id="tab1show">test 1 default = show</div> <div id="tab2show">test 2</div> <div id="tab3show">test 3</div> <div id="tab4show">test 4</div> <div id="tab5show">test 5</div> </div>

Then use this event handler:

 // when user click on any div inside div 'clicks' $('#clicks').on('click', 'div', function(event){ // Get the id of a div that was clicked, eg tab1 var tabId = $(this).attr('id'); // Hide all divs inside div 'tabShows' $('#tabShows div').hide(); // Show only div that was clicked, eg tab1show $('#' + tabId + 'show').show(); });

Here is the link for updated jsFiddle

+1
source 
 <div id="tab1" class="ta">Test 1</div> <div id="tab2" class="ta">Test 2</div> <div id="tab3" class="ta">Test 3</div> <div id="tab4" class="ta">Test 4</div> <div id="tab5" class="ta">Test 5</div> <br /><br /> <div id="tab1show" class="tab"> test 1 default = show </div> <div id="tab2show" class="tab"> test 2 </div> <div id="tab3show" class="tab"> test 3 </div> <div id="tab4show" class="tab"> test 4 </div> <div id="tab5show" class="tab"> test 5 </div> $('#tab2show').hide(); $('#tab3show').hide(); $('#tab4show').hide(); $('#tab5show').hide(); $('.ta').click(function () { $('.tab').hide(); $("#"+$(this).attr("id")+"show").show(); });

Jsfiddle

+1
source

for all of the above answers, the page reload occurs because I came across using these answers, so please kindly use this jquery code for the above answer to prevent the default page and page from loading

 <script> var $contents = $('.tab-content'); $contents.slice(1).hide(); $('.tab').click(function (event, ui) { var $target = $('#' + this.id + 'show').show(); $contents.not($target).hide(); event.preventDefault(); return false; });

+1
source

More articles:


All Articles