Javascript

Question

How can I make the plus/minus sign clickable? It's not right now... How can I make the other button off (dropdown) if open when I click on the second button?

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

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

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

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

// 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');
      }
    }
  }
}

FIDDLE = https://jsfiddle.net/neuhaus3000/jf1zetLw/8/

Soubhik Mondal · Accepted Answer · 2017-02-03T12:06:06.050

Here is the updated fiddle. I tried to simplify your code as much as possible, and used jQuery wherever I could.

function changeText(text) {
  return (text.indexOf('+') >= 0) ? 'Click Me -' : 'Click Me +';
}

$(".dropbtn").click(function() {

  var $this = $(this),
    $dropdownActive = $('.dropdown-active');

  /* changing the text of the active button (if any) */
  $dropdownActive.text(changeText($dropdownActive.text()));

  /* hiding the content under the active button (if any) */
  $('.dropdown-content', $dropdownActive.parent()).toggle('show');

  if (!$this.hasClass('dropdown-active')) {

    /* changing the text of the clicked button */
    $this.text(changeText($this.text()));

    /* showing the content under the clicked button */
    $('.dropdown-content', $this.parent()).toggle('show');

    /* adding this class to the clicked button */
    $this.addClass('dropdown-active');
  }

  /* removing this class from the active button */
  $dropdownActive.removeClass('dropdown-active');
});

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

    var $dropdownActive = $('.dropdown-active');

    /* changing the text of the active button (if any) */
    $dropdownActive.text(changeText($dropdownActive.text()));

    /* hiding the content under the active button (if any) */
    $('.dropdown-content', $dropdownActive.parent()).toggle('show');

    /* removing this class from the active button */
    $dropdownActive.removeClass('dropdown-active');
  }
}

Let me know if you have any troubles. Thanks.

Hey! Thanks so much! There's one little problem. When we click on the opened drop down button to close it, it doesn't. It keeps re-opening. Thanks a million!!! The text will be different from button to button though... :) — Jacques Goudreau, Feb 03 '17 at 11:52
Super! Thank you!!! Regarding the text, it will be different from button to button... ;) Merci! :) — Jacques Goudreau, Feb 03 '17 at 12:32
Accepted... But I need a little modification to be able to add any text on the button. :) Thanks again!!! — Jacques Goudreau, Feb 03 '17 at 13:27
I would need to append "+" or "-" on .dropbtn instead of adding the all Click Me text... But I can't fix this... :( — Jacques Goudreau, Feb 03 '17 at 14:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134775/discussion-between-blaze-sahlzen-and-jacques-goudreau). — Soubhik Mondal, Feb 03 '17 at 14:02

Javascript - Make element clickable and toggle off other button

JAVASCRIPT

1 Answers1