CODEWITHSUNDEEP
jquery
Paul
Paul

Reputation: 385

Show/Hide Multiple Divs with Jquery

I want to use some buttons to show/hide multiple divs using jquery.

The page will initially show all divs. The idea then is that there will be a button to reset (show all) and then separate buttons to show a particular div while hiding the rest.

Any help would be much appreciated.

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">Lorum Ipsum</div>
<div id="div2">Lorum Ipsum</div>
<div id="div3">Lorum Ipsum</div>
<div id="div4">Lorum Ipsum</div>

Upvotes: 21

Views: 139847

Answers (9)

iorgu
iorgu

Reputation: 3053

The target attribute on the links just opened in new window, so I modified the accepted answer to the one below:

jQuery(document).ready(function($) {
  $(function() {
    $('#showall').click(function() {
      $('.targetDiv').show();
    });
    $('.showSingle').click(function() {
      $('.targetDiv').hide();
      $('#div-' + $(this).attr('id')).show();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a class="button" id="showall">All</a>
  <a class="button showSingle" id="showdiv1">Div 1</a>
  <a class="button showSingle" id="showdiv2">Div 2</a>
  <a class="button showSingle" id="showdiv3">Div 3</a>
  <a class="button showSingle" id="showdiv4">Div 4</a>
</div>

<div id="div-showdiv1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div-showdiv2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div-showdiv3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div-showdiv4" class="targetDiv">Lorum Ipsum 4</div>

Upvotes: 0

Praveen Prasad
Praveen Prasad

Reputation: 32137

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>

http://jsfiddle.net/XwN2L/

Upvotes: 44

DN1CE
DN1CE

Reputation: 31

Just a small side-note... If you are using this with other scripts, the $ on the last line will cause a conflict. Just replace it with jQuery and you're good.

jQuery(function(){
     jQuery('#showall').click(function(){
           jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function(){
          jQuery('.targetDiv').hide();
          jQuery('#div'+jQuery(this).attr('target')).show();
    });
});

http://jsfiddle.net/XwN2L/4764/

Upvotes: 3

Justin
Justin

Reputation: 1956

I had this same problem, read this post, but ended building this solution that selects the divs dynamically by fetching the ID from a custom class on the href using JQuery's attr() function.

Here's the JQuery:

$('a.custom_class').click(function(e) {
  var div = $(this).attr('href');
  $(div).toggle('fast');
  e.preventDefault();
}

And you just have to create a link like this then in the HTML:

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>

Upvotes: 0

Amir Ismail
Amir Ismail

Reputation: 3883

Check This Example

Html:

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

Javascript:

$('#showall').click(function(){
    $('div').show();
});

$('#showdiv1').click(function(){
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click(function(){
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').click(function(){
    $('div[id^=div]').hide();
    $('#div3').show();
});

$('#showdiv4').click(function(){
    $('div[id^=div]').hide();
    $('#div4').show();

});

Upvotes: 1

Bozho
Bozho

Reputation: 597402

Assign each div a class. Then you can perform actions on all of them:

$(".divClass").hide();

So each button can do:

$(".divClass").hide()
$("#specificDiv").show();

You can make this more generic, and use the obvious convention - the button and the div with the same number in the id are related. So:

$(".button").click(function() {
  var divId = "#div" + $(this).attr("id").replace("showdiv", "");
  $(".divClass").hide(); 
  $(divId).show();
}

Upvotes: 9

Dan Esparza
Dan Esparza

Reputation: 28385

If they fall into logical groups, I would probably go with the class approach already listed here.

Many people seem to forget that you can actually select several items by id in the same jQuery selector, as well:

$("#div1, #div2, #div3").show();

Where 'div1', 'div2', and 'div3' are all id attributes on various divs you want to show at once.

Upvotes: 25

yoda
yoda

Reputation: 10981

If you want to be able to show / hide singular divs and / or groups of divs with less code, just apply several classes to them, to insert them into groups if needed.

Example :

.group1 {}
.group2 {}
.group3 {}

<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>

Then you just need to use an identifier to link the action to he target, and with 5,6 lines of jquery code you have everything you need.

Upvotes: 1

Jacek Kaniuk
Jacek Kaniuk

Reputation: 5229

simple but stupid approach:

$('#showall').click(function(){
    $('div[id^=div]').show();
});

$('#showdiv1').click(function(){
    $('#div1').show();
    $('div[id^=div]').not('#div1').show();
});

as for better one - add common class to all div's, and use some attribute in buttons with id of target divs

Upvotes: 1

Related Questions