JQuery toggle with multipls divs and icon

Question

I've found examples where you can use a selectors to have multiple divs expand/collapse, but haven't seen one with the use of an icon when collapsed and one when expanded.

How can I adjust the following so that it allows me to expand and collapse multiple divs? ie: if you open one it won't open ALL the others.

<!-- HTML -->
<a href="#" class="show_hide">Show</a>

<div class="slidingDiv" style="display: block;">
Check out
</div>

<!-- CSS -->
.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

<!-- JS -->
$(document).ready(function(){


  $(".slidingDiv").hide();

    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

Adil · Answer 1 · 2013-07-05T07:25:49.650

0

Use slideToggle with $(this) instead of using with $(".slidingDiv")

$(document).ready(function(){
    $(".slidingDiv").hide();    
    $('.show_hide').click(function(){           
        $(this).slideToggle();
        var isShow = $(this).text() == 'Show';
        $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });    
});

edited Jul 05 '13 at 07:25

answered Jul 05 '13 at 06:26

Adil

146,340
25
209
204

Thanks. They just seem to hide each time on click? – DT.DTDG Jul 05 '13 at 06:29
I removed the statement from click event that hides all, check the updated code. – Adil Jul 05 '13 at 07:26

DRAJI · Answer 2 · 2013-07-05T06:48:20.507

0

  $(document).ready(function(){
 $(".show_hide").click(function(){
$("div").slideToggle();
 });
});

Try this

  http://jsfiddle.net/DRAJI/Q8tFh/4/

This is an Example jsfiddle, refer this

edited Jul 05 '13 at 06:48

answered Jul 05 '13 at 06:36

DRAJI

1,829
8
26
45

Ummm that doesn't answer the question. All you have done is added it to a fiddle and removed some code (ie: the icon changing position) – DT.DTDG Jul 05 '13 at 06:38
Sorry, i didn't understanding you. I think it will be your expected result http://jsfiddle.net/DRAJI/Q8tFh/10/ – DRAJI Jul 05 '13 at 06:56

score 0 · Answer 3 · edited May 23 '17 at 10:32

You are asking for a complex solution, here are some tips:

1 - Use different icons on hide/show:

Use a different class for showing and hiding, than use removeClass & addClass to change your "a" class. Ex:

$('a.group1').removeClass('hiding').addClass('showing');

2 - To not hide/show multiple divs, use a second class to group them.

Ex:

<a class="show_hide group1">
<div class="slidingDiv group1"> div1 </div>
<div class="slidingDiv group1"> div2 </div>

...

$('.slidingDiv.group1').hide();

Than, you can select them by using "a.group1", and ".slidingDiv.group1"... Thus slidingDiv can determine how to hide, and group1 determines what should be hidden/shown.

See:

Add class: http://api.jquery.com/addClass/
Remove class: http://api.jquery.com/removeClass/
Multiple classes HTML: https://stackoverflow.com/a/8722205/506625
Multiple selector jquery: http://api.jquery.com/multiple-selector/
Element visibility jquery: http://api.jquery.com/visible-selector/

score 0 · Answer 4 · answered Jul 05 '13 at 07:21

What you are looking for is an accordion. Search for "jQuery Accordion" and you will find many solutions.

Here is a small idea to get you going if you want to do it yourself:

HTML:

<div id="container">
    <div class="header">H1</div>
    <div class="content">c1</div>
    <div class="header">H2</div>
    <div class="content">c2</div>
    <div class="header">H3</div>
    <div class="content">c3</div>
</div>

CSS:

.container { height: 600px; width: 400px; }
.header { height: 32px; background: url(plus.png) no-repeat right center; }
.selectedHeader { background: url(minus.png) no-repeat right center !important; }
.content { height: 200px; }

Javascript:

$('#container').live("click", function (e) {
    var $item = $(e.target);
    if ($item.hasClass("header")) {
        $item.addClass("selectedHeader").siblings().removeClass("selectedHeader"));
        $content.not($item.next()).slideUp();
        $item.next().slideDown(UxSpeed);
    }
}

// this will hide all contents initially and show only the first one
$('.header').not($('.header').first()).next().hide();

Hope this helps.

score 0 · Answer 5 · answered Jul 05 '13 at 08:38

Check this one, DEMO http://jsfiddle.net/yeyene/FPGH4/

Add target attribute to target multiple divs.

HTML

<a class="show_hide" target="slidingDiv1">Show</a>
<div id="slidingDiv1" class="slidingDiv">
    Check out 1
</div>
<a class="show_hide" target="slidingDiv2">Show</a>
<div id="slidingDiv2" class="slidingDiv">
    Check out 2
</div>
<a class="show_hide" target="slidingDiv3">Show</a>
<div id="slidingDiv3" class="slidingDiv">
    Check out 3
</div>

JQUERY

$(document).ready(function(){ 
    $('.show_hide').on('click',function(){
        $('.show_hide').text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
        $(".slidingDiv").slideUp(100);
        $('#'+$(this).attr('target')).slideDown(300);
        var isShow = $(this).text() == 'Show';
        $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:10) +'px'});
    });
});

JQuery toggle with multipls divs and icon

5 Answers5

HTML

JQUERY