Using JQuery toggle to toggle between multiple divs with icons

Question

Using JQuery toggle to toggle between multiple divs with icons

I have been exploring ways to use a selectors for expanding and collapsing multiple divs, but haven't found an example that includes switching icons depending on the collapse/expand state.

Is there a way to modify the code below so that it allows me to expand and collapse multiple divs independently? For instance, opening one should not automatically open all 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(){
        $(this).next(".slidingDiv").slideToggle();
      var isShow = $(this).text() == 'Show';
      $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
    });

});

javascript jquery html css

Answer 1

Answer №1

If you need a more intricate solution, here are some suggestions:

1 - Utilize different icons for hide/show functionality:

Assign distinct classes for showing and hiding elements, then use removeClass & addClass to modify your "a" class. For example:

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

2 - Prevent hiding/showing multiple divs by using an additional class for grouping them together.

For instance:

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

...

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

This way, you can target them using "a.group1" and ".slidingDiv.group1"... Where slidingDiv controls the visibility, and group1 determines what should be hidden or shown.

Check out these resources:

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

Answer 2

If you need a more intricate solution, here are some suggestions:

1 - Utilize different icons for hide/show functionality:

Assign distinct classes for showing and hiding elements, then use removeClass & addClass to modify your "a" class. For example:

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

2 - Prevent hiding/showing multiple divs by using an additional class for grouping them together.

For instance:

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

...

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

This way, you can target them using "a.group1" and ".slidingDiv.group1"... Where slidingDiv controls the visibility, and group1 determines what should be hidden or shown.

Check out these resources:

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

Answer 3

Answer №2

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

Here is a helpful resource for you to check out:

  http://jsfiddle.net/ABC123/XYZ456/

You can refer to this example jsfiddle for further guidance.

Answer 4

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

Here is a helpful resource for you to check out:

  http://jsfiddle.net/ABC123/XYZ456/

You can refer to this example jsfiddle for further guidance.

Answer 5

Answer №3

If you're in search of a solution, look no further than an accordion. Try searching for "jQuery Accordion" and you'll discover numerous options available.

Here's a simple starting point if you prefer to tackle 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();

I hope this information is beneficial to you.

Answer 6

If you're in search of a solution, look no further than an accordion. Try searching for "jQuery Accordion" and you'll discover numerous options available.

Here's a simple starting point if you prefer to tackle 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();

I hope this information is beneficial to you.

Answer 7

Answer №4

Opt for using slideToggle with $(this) rather than utilizing it 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'});
    });    
});

Answer 8

Opt for using slideToggle with $(this) rather than utilizing it 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'});
    });    
});

Answer 9

Answer №5

Have a look at this demo: http://jsfiddle.net/yeyene/FPGH4/

To target multiple divs, add the target attribute.

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'});
    });
});

Answer 10

Have a look at this demo: http://jsfiddle.net/yeyene/FPGH4/

To target multiple divs, add the target attribute.

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'});
    });
});

Using JQuery toggle to toggle between multiple divs with icons

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

HTML

JQUERY

Similar questions

Is there a more efficient method than creating a separate variable for the navbar on each individual page where it is being utilized?

Whenever I use jQuery to dynamically add a new form input, the Select2 input fails to function properly

Is it a Mozilla Firefox glitch or something else?

How to Make a Div Tag Fade Effect with JavaScript in an External File

Navigate to the appropriate Angular route using HTML5 mode in Rails

The array is devoid of any elements, despite having been efficiently mapped

Captivating Images accompanied by Descriptive Captions

Use Jquery to iterate over the AJAX JSON response and add it to a collection of element identifiers

What is the interaction between Vue's v-model and the update:modelValue directive, and how can we customize the default behavior to prevent it from

storing information in HTML using Django

Exclude basic authentication for a specific route

What is the best way to transmit several data fields to a PHP page using Ajax?

What is preventing the return type of document.createElement from being designated to a specific generic that is limited to HTMLElement?

Avoiding errors on the client side due to undefined levels in a specific response JSON can be achieved using the RESTful API

Reset checkboxes in Material UI data grid

strange occurrences of bootstrap.min.css.map popping up

When scrolling, dynamically change the background color by adding a class

Strategies for deactivating the next button when the input field is blank

Creating a dynamic 3D pie chart with Highcharts and JSON data

It's time to wrap up the session with some old "cookies" and a closing function