CODEWITHSUNDEEP
jquery-uiaccordion
Steph
Steph

Reputation: 11

Add words next to icons in jquery ui accordion

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>

Upvotes: 1

Views: 1201

Answers (1)

apaul
apaul

Reputation: 16170

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>

Upvotes: 1

Related Questions