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 :-)

Solution 1

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>

Solution 2

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.