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/

You are using the same id for the 2 buttons, assign an unique one to each. Then , pass the reference of the button as parameter to toggleSign, to modify only the one passed. — Veve, Feb 02 '17 at 18:31
I can't add a different ID... It's the same code that I will use for the button (partial). Thanks! :) — Jacques Goudreau, Feb 02 '17 at 18:34
It's not a valid HTML then, differents elements must have different ids. You should user a class for this. — Veve, Feb 02 '17 at 18:36
If you can't add a different ID, then you can't have it working as you would expect it to. Simple. — A. L, Feb 02 '17 at 18:39

score 2 · Answer 1 · answered Feb 02 '17 at 18:35

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".

dlolsen · Answer 2 · 2017-02-02T19:14:57.100

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.

score 0 · Answer 3 · answered Feb 02 '17 at 18:34

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

score 0 · Answer 4 · answered Feb 02 '17 at 18:34

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

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

JAVASCRIPT

4 Answers4