Add words next to icons in jquery ui accordion

Question

I have a jquery ui accordion which works fine. I have the title on the left, and a +/- on the right which I'm using fontawesome for.

Is it possible to add some words next to the +/-? For example expand/collapse.

My code looks like this:

jQuery(document).ready(function($) {
     var icons = {
      header: "ui-icon-plus icon-large",
      activeHeader: "ui-icon-minus icon-large"
     };
 
 $( "#accordion" ).accordion({
  heightStyle: "content",
  icons: icons,
  active: false,
  collapsible: true,
  header: "h3",
  navigation: true,
     });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<div id="accordion">
  <h3>Title 1</h3>
  <div>
    <p>
      Text here.
    </p>
  </div>
  <h3>Title 2</h3>
  <div>
    <p>
      Text here.
    </p>
  </div>

  <h3>Title 2</h3>
  <div>
    <p>
      Text here.
    </p>
  </div>
</div>

Welcome to StackOverflow. Please read our Help section on how to create an MCVE (http://stackoverflow.com/help/mcve) and add it to your question. You will get faster, better help from the community that way. — blurfus, Apr 16 '15 at 17:07
Related, possibly duplicate: http://stackoverflow.com/questions/2741312 — blgt, Apr 16 '15 at 19:49
The HTML looks like this; https://jsfiddle.net/b98j3v37/ @apaul34208 — Steph, Apr 17 '15 at 07:06
@bigt Thanks. That kind of works (as in I can get the words next to the expand/collapse), but the bit that I don't understand is how to change the words expand to collapse once the accordion is open. — Steph, Apr 17 '15 at 07:10

score 1 · Answer 1 · answered Apr 17 '15 at 15:49

You could use prepend() in a create function to add the text initially and then you could change the text in an activate function

$(document).ready(function($) {
  var icons = {
    header: "ui-icon-plus icon-large",
    activeHeader: "ui-icon-minus icon-large"
  };

  $("#accordion").accordion({
    heightStyle: "content",
    icons: icons,
    active: false,
    collapsible: true,
    header: "h3",
    navigation: true,
    create: function(event, ui) {
      $('.ui-accordion-header').prepend('<span class="exCol">expand </span>');
    },
    activate: function(event, ui) {
      $(ui.newHeader).children('.exCol').text('collapse ');
      $(ui.oldHeader).children('.exCol').text('expand ');
    }
  });
});

.exCol {
  font-size: .5em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<div id="accordion">
  <h3>Title 1</h3>
  <div>
    <p>Text here.</p>
  </div>
  <h3>Title 2</h3>

  <div>
    <p>Text here.</p>
  </div>
  <h3>Title 2</h3>

  <div>
    <p>Text here.</p>
  </div>
</div>

Though I would recommend using tooltips for this instead, just use attr() to set and change the tittle:

$(document).ready(function($) {
  var icons = {
    header: "ui-icon-plus icon-large",
    activeHeader: "ui-icon-minus icon-large"
  };

  $("#accordion").accordion({
    heightStyle: "content",
    icons: icons,
    active: false,
    collapsible: true,
    header: "h3",
    navigation: true,
    create: function(event, ui) {
      $('.ui-accordion-header').attr('title', 'expand');
    },
    activate: function(event, ui) {
      $(ui.newHeader).attr('title', 'collapse');
      $(ui.oldHeader).attr('title', 'expand');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<div id="accordion">
  <h3>Title 1</h3>
  <div>
    <p>Text here.</p>
  </div>
  <h3>Title 2</h3>

  <div>
    <p>Text here.</p>
  </div>
  <h3>Title 2</h3>

  <div>
    <p>Text here.</p>
  </div>
</div>

Add words next to icons in jquery ui accordion

1 Answers1