How to add a plus/minus sign to a jquery accordion

Question

I have the following simple html code:

   <div id="menu">

        <h3><span class="panel-icon">+</span> Slide up/down</h3>
        <span class="panel">
        <p>Now you see me!</p>
        </span>

        <h3><span class="panel-icon">+</span> Slide Up/Down</h3>
        <span class="panel">
        <p>Now you see me!</p>
        </span>

    </div>

and I use the accordion function from jQuery to open and close the content under each header:

$(document).ready(function(){
  $("#menu").accordion({collapsible: true, active: false, animate: 500,});
});

The accordion itself works perfectly. However, I don't know how I can swich between a plus and a minus icon based if the content is shown or not.

I thought the code might be something like this:

$(document).ready(fucntion(){

  if ((".panel") == visibility = collapse) {
  $(".panel-icon").html("-");
  }
  else if ((".panel1") == visibility = hidden){
  $(".panel-icon").html("+");   
  }

});

or maybe something similar to this way:

$(document).ready(function(){
        $('.panel-icon').text(function(_, txt) {
        return txt === "+" ? "-" : "+";
        });
});

I am very new to the jQuery programming so I hope you can help me. Thank you :-)

Answer 1

You should use JQueryUI with customised icons. You can find it on the link below: http://jqueryui.com/accordion/#custom-icons

Please also have a look on this question it might help: How to customize the plus/minus jQuery UI accordion images

$(function() {
var icons = {
  header: "ui-icon-circle-arrow-e",
  activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
  icons: icons
});
$( "#toggle" ).button().click(function() {
  if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
    $( "#accordion" ).accordion( "option", "icons", null );
  } else {
    $( "#accordion" ).accordion( "option", "icons", icons );
  }
}); });

Customize the header icons with the icons option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.

Answer 2

Try utitlizing click event delegated to h3.ui-accordion-header ; iterate h3.ui-accordion-header elements with .each() , if element has class .ui-state-active set .panel-icon text to "-" , else set .panel-icon text to "+"

 $(document).ready(function() { $("#menu").accordion({ collapsible: true, active: false, animate: 500 }).on("click", "h3.ui-accordion-header", function(e) { $("h3.ui-accordion-header").each(function(i, el) { $(this).find(".panel-icon").text($(el).is(".ui-state-active") ? "-" : "+") }) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="menu"> <h3><span class="panel-icon">+</span> Slide up/down</h3> <span class="panel"> <p>Now you see me!</p> </span> <h3><span class="panel-icon">+</span> Slide Up/Down</h3> <span class="panel"> <p>Now you see me!</p> </span> </div> 

Answer 3

You should use css for your icons and jquery for your functionality. You don't need jquery-ui to add and remove icons. If you are already doing so then fair enough, but for thwe future, here is a good solution with just JQuery and css.

See the jsfiddle here for an example

openCloseButton.removeClass('is-closed').addClass('is-open');

The example esxpands this into a working example, it's simplified and I've used background colour to denote opened and closed state as I didn't have icons handy, but you can see how the JQuery toggles a css class that defines the style of your open and close buttons.

The benefits of doing it like this are that you keep the styling in the css, where it belongs. This makes it much easier in the future to change the icon, perhaps to pure css, or a sprite. It also makes it easier to re-use the styles elsewhere without needing the JQuery.