Jquery change text button show more / show less

Question

I am using jQuery to hide or show elements with a button. The button value should change to: Show more when elements are hidden and show less when elements are shown.

My html code

<section>
    <div class="contact_channel" name="<?php echo $this->id; ?>"></div>

    <div class="clearfix">
        <input type="button" class="showMore tiny button" value="Show more">
    </div>

    <div class="show_more" style="display:none;"></div>
</section>

My jQuery

<script type="text/javascript">

    $(document).ready(function () {
        $('.showMore').on('click', function () {
            var section = $(this).closest('section'),
                text    = section.find('.show_more'), // use classes, not ID
                state   = text.is(':hidden');
                button  = $(this).find('input');

            text[state?'slideDown':'slideUp'](500);
            button.prop('value', function() {
                return state ? "Show more" : "Show less";
            });
            $('input').show(200);
        });
    });
</script>

As you can see, this part of code doesn't work :

        button.prop('value', function() {
            return state ? "Show msdsdfs" : "Show lsdfsdfs";
        });
        $('input').show(200);

Any idea ?

Answer 1

You don't need the find, since the button has the showMore class

Change this code

 button  = $(this).find('input');

to

 button  = $(this);