How can I toggle text in the header of the jQuery

Question

I want text in the header of my jQuery accordion to toggle between "edit" and "close" -- I can get it working when toggling a single panel open and closed, however if I leave a panel open and click on a different panel, the previous panel closes but the text still says "close."

I'm still learning jQuery and JavaScript. I've tried for hours, but can't seem to find a solution. Any suggestions would be hugely appreciated!

This jQuery allows me to toggle the text successfully on one panel:

$(function(){
 $(".details-toggle").click(function () {
  $(this).find(".edit-toggle").text(function(i, text){
      return text === "edit" ? "close" : "edit";
  })
});

JSFIDDLE demo: http://jsfiddle.net/dylanstewart/nvhsyx6n/

Answer 1

The function that you need is this:

$(".details-toggle").click(function () {
   $('.details-toggle').find('.edit-toggle').text('edit');
   $(this).find(".edit-toggle").text(function(i, text){
     return text === "edit" ? "close" : "edit";
   })
});

I Hope this will help you

UPDATE

  $(".details-toggle").click(function () {
     $('.details-toggle').find('.edit-toggle').not($(this).find('.edit-toggle')).text('edit');
     $(this).find(".edit-toggle").text(function(i, text){
         return text === "edit" ? "close" : "edit";
     });
  });

Answer 2

Just set all the toggles to "edit" whenever one is clicked, then use the ui-state-active class to set the text on the activated header, as follows:

$(".details-toggle").click(function () {
        $(".edit-toggle").text("edit");
        $(".ui-state-active").find(".edit-toggle").text("close");
});

See the full jsfiddle.

Answer 3

DEMO

Set all .edit-toggle elements within the accordion to 'edit' first as in the following:

$(".details-toggle").click(function () {
    $(this).closest('.ui-accordion').find('.edit-toggle').not($('.edit-toggle', this) ).text('edit');
    $(this).find(".edit-toggle").text(function(i, text){
        return text === "edit" ? "close" : "edit";
    });
});

NOTE: You don't want to change .edit-toggle elements globally; .closest() ... find() will keep you within the accordion where the click originated.

Answer 4

$(function() {
    $(".details-toggle").click(function () {   
      text = $(this).find(".edit-toggle").text();
      $(".edit-toggle").text("edit");
      $(this).find(".edit-toggle").text(text);
      $(this).find(".edit-toggle").text(function(i, text){
          return text === "edit" ? "close" : "edit";
      })
   });
   $("#accordion").accordion({ header: "h3", collapsible: true, active: false });
});

Save previous text, then change everything to edit, switch back text and change it. Fiddle is here

Answer 5

Both Jozef Dúc's and mattingly890's solutions work perfect. If you're not using the jQuery UI CSS framework Jozef Dúc's solution is ideal. If you're using the jQuery UI CSS framework then mattingly890's solution is ideal because it requires less code by utilizing the .ui-state-active class. Both effective solutions for different scenarios.

If you're using the jQuery UI CSS framework with accordion use mattingly890's solution:

$(".details-toggle").click(function () {
    $(".edit-toggle").text("edit");
    $(".ui-state-active").find(".edit-toggle").text("close");
});

If you're not using the jQuery UI CSS framework with accordion use Jozef Dúc's solution:

$(function(){
    $(".details-toggle").click(function () {   
      text = $(this).find(".edit-toggle").text();
      $(".edit-toggle").text("edit");
      $(this).find(".edit-toggle").text(text);
      $(this).find(".edit-toggle").text(function(i, text){
          return text === "edit" ? "close" : "edit";
      })
   });

Thanks for these solutions!