Make the minus/plus sign toggle only on the clicked button...?

Question

How can I make the minus/plus sign toggle only on the clicked button? How can I make it clickable (it's not right now)...

JAVASCRIPT

$(".dropbtn").append('<span class="adl-signs">+</span>');

function ctaDropMenu(e) {
  e.target.nextElementSibling.classList.toggle("show");
}

function toggleSigns() {
  $(".adl-signs").html(function(_, html) {
    return $.trim(html) == '+' ? '-' : '+';
  });
}

$(".dropbtn").click( function(e) {
    ctaDropMenu(e)
  toggleSigns()
});

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

https://jsfiddle.net/neuhaus3000/jf1zetLw/4/

Answer 1

Change those two functions like this:

function toggleSigns(e) {
  $(e.target).find(".adl-signs").html(function(_, html) {
    return $.trim(html).slice(-1) == '+' ? '-' : '+';
  });
}

$(".dropbtn").click( function(e) {
  ctaDropMenu(e)
  toggleSigns(e)
});

And try to use different id values for elements. Two div's got id="myDropdown" .

Answer 2

Why don't you simplify things and use css to add the + instead of jQuery?

.dropbtn:after{
    content: '+';
}

.dropbtn.open:after{
    content: '-';
}

Then you can just toggle the open class on .dropbtn

$(".dropbtn").click( function(e) {
    e.target.classList.toggle("open");
    e.target.nextElementSibling.classList.toggle("show");
});

See the forked jsFiddle: [Link] ( https://jsfiddle.net/e1x10ae6/ )

To answer why it was changing the +/- sign on both buttons, you gave the same class to both spans: $(".dropbtn").append('<span class="adl-signs">+</span>'); Then in toggleSigns function you selected all instances of that class ( .adl-signs ) when you used the following selector $(".adl-signs") and changed the sign on all.

Answer 3

Add a unique id on each of your button like this:

<button id="1" class="dropbtn">Click Me</button>

Then use that id to specfify which button to change

$(".dropbtn").click( function(e) {
    var btn_id = $(this).attr('id'); //get button id
    ctaDropMenu(e)
    toggleSigns(btn_id)
});

On your toggleSigns function use the id to select the button

function toggleSigns(id) {
    $("#"+id+" .adl-signs").html(function(_, html) {
       return $.trim(html) == '+' ? '-' : '+';
    });
}

Updated fiddle: jsfiddle

Answer 4

As Veve said, you are using the class to do your toggle. However, if you pass this (the element being clicked) you can target the button being used.

function toggleSigns(element) {
  $(element).find('.adl-signs').html(function(_, html) {
    return $.trim(html) == '+' ? '-' : '+';
  });
}

$(".dropbtn").click( function(e) {
    ctaDropMenu(e)
  toggleSigns(this)
});

updated fiddle: https://jsfiddle.net/jf1zetLw/7/

e: updated with real fiddle :/