Multiple show/hide buttons with button text change on click

Question

i have a wordpress page with several buttons, that show/hide a certain div, also the button text changes from "more info" to "less info" according to button click.

This is my code so far, but as i have multiple buttons, of course each time i click on one, the code is executed for all hidden divs and button texts.

What has the code to be like, that it only affects the one button actually clicked / hidden div at a time?

Heres the HTML:

<a class="clicker reveal" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;">MORE INFOS</a>

and JS:

<script type="text/javascript">

    jQuery.noConflict();

    // Use jQuery via jQuery(...)
    jQuery(document).ready(function(){
        jQuery(".slider").hide();

        jQuery('.reveal').click(function() {
            if (jQuery(this).text() === 'MORE INFOS') {
                jQuery(this).text('LESS INFOS');
            } else {
                jQuery(this).text('MORE INFOS');
            }
        });

        jQuery(".clicker").click(function(){
            jQuery(".slider").slideToggle("slow");

            jQuery.each(masterslider_instances, function(i, slider) {
                slider.api.update();
                slider.api.__resize(true);
                jQuery.each(slider.controls, function( index, control ) {
                    if (control.realignThumbs) control.realignThumbs();
                });

                jQuery.each(masterslider_instances, function(a,b){
                    b.api.update(true);
                });
            });  

        });
    });
</script>

and the targeted div:

<div class="slider>Some content</div>

Thank you in advance!

Answer 1

Try this

 jQuery('.reveal').each(function(idx,item) {
  jQuery(item).click(function(){
    if (jQuery(this).text() === 'MORE INFOS') {
     jQuery(this).text('LESS INFOS');
    }
    else {
      jQuery(this).text('MORE INFOS');
    }

  });
});

Here is working Fiddle

Answer 2

Make a reference between the anchor and div by using data attribute.

<a class="clicker reveal" data-target="slider-1" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;">MORE INFOS</a>

<div class="slider slider-1">Some content</div>

Now, you can do the following-

jQuery('.clicker').click(function() {
  var targetDiv = jQuery('.' + jQuery(this).attr('data-target'))
  if (jQuery(this).text() === 'MORE INFOS') {
    jQuery(this).text('LESS INFOS');
    targetDiv.slideDown('slow');
  } else {
    jQuery(this).text('MORE INFOS');
    targetDiv.slideUp('slow');
  }

  // do the rest of your stuff here
});

Answer 3

UPDATE

I am informed that the button is in a div, the update reflects that small change:

From:

var tgt = $(this).next('.slider');

To:

var tgt = $(this).parent().next('.slider');

The following demo uses the class methods. Details are provided within the source in the comments.

SNIPPET

 /* Removed a chunk of meaningless code since there's no way of using it because the plugin isn't provided (I'm assuming). */ $(function() { /* Combined both the `more/less` and `slideToggle()` features under one class(`.reveal`) and one click event. */ $('.reveal').on('click', function(e) { /* Prevent anchor from default behavior of jumping to a location. */ e.preventDefault(); /* See if `.reveal` has class `.more` */ var more = $(this).hasClass('more'); /* `.tgt` is the next `.slider` after `this`(clicked `a.reveal`). */ var tgt = $(this).parent().next('.slider'); /* Toggle `.reveal`'s state between `.more` and `.less` classes. (See CSS) */ if (more) { $(this).removeClass('more').addClass('less'); } else { $(this).removeClass('less').addClass('more'); } /* `slideToggle()` only the `div.slider` that follows `this` (clicked `a.reveal`) */ tgt.slideToggle('slow'); }); }); 

 .reveal { display: block; } .reveal.more:before { content: 'MORE INFO'; } .reveal.less:before { content: 'LESS INFO'; } .slider { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <div> <a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a> </div> <div class="slider">Some content</div> <div> <a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a> </div> <div class="slider">Some content</div> <div> <a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a> </div> <div class="slider">Some content</div>