CODEWITHSUNDEEP
jquerytoggle
Moozoo
Moozoo

Reputation: 497

Jquery dynamic plus/minus symbol toggle

I'm using a jquery toggle script. I would really like a plus (+) sign to show in the heading when the toggle hasn't been opened, and a minus (-) symbol for when it has been.

The reason I'm not just using the script below is because the current script I'm using automatically closes an opened toggle when another toggle is clicked - which is a feature I really like! :)

$('#toggle-view li').click(function () {

    var text = $(this).children('p');

    if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).children('span').html('-');     
    } else {
        text.slideUp('200');
        $(this).children('span').html('+');     
    }   
});
});

script I am using:

$(document).ready(function(){
$(".parents-toggle > div").click(function () {
$(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".iteminfo-toggle").slideToggle();
});
});

my html

<div class="parents-toggle">
<div class="itemheading2_toggle">Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

Anyone have any ideas how to combine the plus/minus symbols to display in the current script I am using? ^^;

Here's an example of the minus/plus toggle script: http://www.queness.com/resources/html/toggle/index.html

Upvotes: 4

Views: 16223

Answers (3)

Imtiaz
Imtiaz

Reputation: 2524

If you used fontawesome or any other web icons, you could take advantage of jQuery's hasClass and add/remove class functions. I prefer this because the code looks cleaner.

I prefer carets instead of plus-minus. You can use fa-plus fa-minus instead

<script>
$('.reveal1').click(function(){
    $('.optional-field1').toggle(200);
    
    var child = $(this).children();
    if(child.hasClass('fa-caret-down'))
        child.removeClass('fa-caret-down').addClass('fa-caret-up');
    else
        child.removeClass('fa-caret-up').addClass('fa-caret-down');

    return false;
});
</script>
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="reveal1" href="#">Toggle Expand <i class="fa fa-caret-down"></i></a>

<p class="optional-field1" style="display: none;">
  Lorem Ipsum is simply dummy text
</p

Upvotes: 1

JesseBuesking
JesseBuesking

Reputation: 6586

Here's how I'd do it:

var parent = $('#toggle-view'), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

// bind the click to all headers
$('li h3', parent).click(function() {

    // get the li that this header belongs to
    var li = $(this).closest('li');

    // check to see if this li is not already being displayed
    if (!$('p', li).is(':visible'))
    {
        // loop on all the li elements
        $('li', parent).each(function() {

            // slide up the element and set it's marker to '+' 
            $('p', $(this)).slideUp(delay);
            $('span', $(this)).text('+');
        });

        // display the current li with a '-' marker
        $('p', li).slideDown(delay);
        $('span', li).text('-');
    }
});

Check out http://jsfiddle.net/v9Evw/ to see it in action.

To hide on click if it's currently visible, add an else to the click method:

    else {
        $('p', li).slideUp(delay);
        $('span', li).text('+');  
    }

Check out http://jsfiddle.net/v9Evw/1/ to see it with this update.

Upvotes: 2

marissajmc
marissajmc

Reputation: 2603

How about this?

html: add a span for the symbol

<div class="parents-toggle">
    <div class="itemheading2_toggle"><span class="symbol">-</span>Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

js: toggle +/- symbol

$(".parents-toggle > div").click(function () {
    $(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
    $(this).siblings(".iteminfo-toggle").slideToggle();

    // toggle open/close symbol
    if($('.itemheading2_toggle span').text() == '-'){
        $('.itemheading2_toggle span').text('+');   
    } else {
        $('.itemheading2_toggle span').text('-');
    }
});

Demo: http://jsfiddle.net/bg7tw/

Upvotes: 3

Related Questions