Toggle div only when button clicked

user_6531785 0
Viewed 48

jQuery newbie here, I'm hoping someone can help.

I have a function when a div with the class .ventures-minorities is clicked, it changes height onclick to show / hide .logos-wrapper - and the button with the class .expander toggles text accordingly - "Learn more" to "Close" - when clicked.

The button and div is working and toggling as expected, but how do I make the .logos-wrapper only appear when the .expander button is clicked?

Right now the .logos-wrapper container is able to toggle when I click anywhere around it, which is probably linked to the .ventures-minorities container being targeted onclick but I don't know how to make the .logos-wrapper toggle only when the .expander button is clicked.

This is an issue because when the div is clicked outside of the button, it toggles, but the button text doesn't. I'm unsure of how to tie these two together.

(function($) {
  $(document).ready(function() {

    $('.expander .elementor-button-text').on('click', function() {
      if ($.trim($(this).text()) == 'Learn more') {
        $(this).text('Close');
      } 
      else {
        $(this).text('Learn more');
      }
    });

    $(".ventures-minorities").on('click', function() {
      $(this).find(".logos-wrapper").toggleClass("sized");
    });

  });
})(jQuery);
.logos-wrapper {
  height: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.sized {
  height: auto;
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.ventures-minorities {
  padding: 50px 0;
}

button {
  width: 150px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

button:hover {
  background-color: tomato;
  color: #000;
}

button:active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>

  <div class="logos-wrapper">content</div>
</div>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>

  <div class="logos-wrapper">content</div>
</div>

onclick jquery javascript
1 Answers

You can simply define the event listener for the buttons .expander instead of the parent container .ventures-minorities.

To get the toggle to work, you need to use the method parent() before you find the .logos-wrapper because $(this) is now the button, a child of .ventures-minorities:

$(this).parent().find(".logos-wrapper").toggleClass("sized");

Working example:

(function($) {
  $(document).ready(function() {

    $('.expander .elementor-button-text').on('click', function() {
      if ($.trim($(this).text()) == 'Learn more') {
        $(this).text('Close');
      } 
      else {
        $(this).text('Learn more');
      }
    });

    $(".expander").on('click', function() {
      $(this).parent().find(".logos-wrapper").toggleClass("sized");
    });

  });
})(jQuery);
.logos-wrapper {
  height: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.sized {
  height: auto;
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.ventures-minorities {
  padding: 50px 0;
}

button {
  width: 150px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

button:hover {
  background-color: tomato;
  color: #000;
}

button:active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

In this case you could combine the two event listeners.

To get the text exchange to work, you have to find() the span, that holds the text, at best with a separate var, to prevent repetition:

$('.expander').on('click', function() {
  const text_span = $(this).find(".elementor-button-text");
      
  if ($.trim(text_span.text()) == 'Learn more') {...

Working example:

(function($) {
  $(document).ready(function() {

    $('.expander').on('click', function() {
      const text_span = $(this).find(".elementor-button-text");
      
      if ($.trim(text_span.text()) == 'Learn more') {
        text_span.text('Close');
      } 
      else {
        text_span.text('Learn more');
      }
      
      $(this).parent().find(".logos-wrapper").toggleClass("sized");
    });

  });
})(jQuery);
.logos-wrapper {
  height: 0;
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.sized {
  height: auto;
  opacity: 1;
  transition: all 0.35s ease-in-out;
}

.ventures-minorities {
  padding: 50px 0;
}

button {
  width: 150px;
  height: 50px;
  background-color: darkslateblue;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-family: "Roboto";
  border: none;
  letter-spacing: 1px;
}

button:hover {
  background-color: tomato;
  color: #000;
}

button:active {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

<div class="ventures-minorities">
  <button class="expander">
    <span class="elementor-button-text">Learn more</span>
  </button>
  
  <div class="logos-wrapper">content</div>
</div>

user_153773550
Related