Unable to toggleClass using jQuery

Question

I am fairly new to jQuery and I am attempting to write a simple script that will show more text when a "show more" link is clicked.

Currently I am able to change the link text between "show more" and "show less", but I am still unable to toggle the two css classes. The first class hides the select content and the second class should display it.

Here is the code so far:

css

.hideThis{
display:none;
}
.showThis{
display:inline;
}

html

<div class="review">
                                <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque 
                                sagittis velit, varius commodo odio accumsan ut. Etiam vestibulum commodo viverra. 
                                Integer condimentum quis ligula eget interdum. Vivamus semper posuere sapien ut tristique
                                <span class="hideThis">Etiam vestibulum commodo viverra. 
                                Integer condimentum quis ligula eget interdum. Vivamus semper posuere sapien</span>
                                <a href="#" class="showMoreText">... show more</a>
                                </p>
                            </div>

Jquery

$('.showMoreText').click(function(){

        var text = $(this).html();
        if(text == '... show more'){

            $('.hideThis').toggleClass('.showThis');
            $(this).html('... show less');

        }else {
            $('.showThis').toggleClass('.hideThis');
            $(this).html('... show more');
        }

    });

edit:

added a JSFiddle How can I apply this to a page with multiple "showMoreContent" links?

Thanks

Chris

Answer 1

$('.showMoreText').on('click', function(event) {
    // event.preventDefault();
    $(this).text(function(_, txt) {
        return txt === '... show less' 
               ? '... show more' 
               : '... show less';
    }).prev('.hideThis').toggle();
});

http://jsfiddle.net/JRjaQ/

Answer 2

In your case you need to do it like this: http://jsfiddle.net/k2n7Z/1/

$('.showMoreText').click(function(){
    var text = $(this).html();
    if(text == '... show more'){

        $('#myId').toggleClass('showThis hideThis');
        $(this).html('... show less');

    }else {
        $('#myId').toggleClass('showThis hideThis');
        $(this).html('... show more');
    }
});

.toggleClass toggles to classes and removes/adds the one the element currently has/not has.

Furthermore i added an id to your span. To identify an element by classes which you remove/add is bad practice.

Answer 3

You are on the right track.

Note that when using toggleClass(), you don't replace all class names assigned to the matched element. So, when using:

<span class="hideThis">blah blah</span>

$('.hideThis').toggleClass('showThis');

The resulting element is:

<span class="hideThis showThis">blah blah</span>

This may be confusing for your browser and not have the expected result on screen.

You should use something like this:

<span class="readMore hideThis">blah blah</span>

// This should both hide and show the span on each click
$('.readMore').toggleClass('hideThis');
$('.readMore').toggleClass('showThis');

You can also try using one of these:

$('.readMore').hide();
$('.readMore').show();

And if you show several reviews on the same page, using the className as the jQuery identifier would lead your user to reveal all hidden texts on the page when clicking on any Read more link. Try using id's on html tags in that case.

Further reading on the matter of toggleClass(): http://api.jquery.com/toggleClass/

Have fun!

Answer 4

You could minimize the code a bit using as below,

$('.showMoreText').click(function(){

    var text = $(this).html();
    $(this).toggleClass('active');
    $('.showMoreSpan').toggleClass('hideThis');
    if($(this).hasClass('active'))
        $(this).html('...show less');
    else
        $(this).html('...show more');

});

Check this jsfiddle for modified css and js. Hope this helps you.

Answer 5

Try This, this is helpful for you.

$('.showMoreText').click(function(){
        var text = $(this).html();
        if(text == '... show more'){

            $('.hideThis').removeClass('hideThis').addClass('showThis');
            $(this).html('... show less');

        }else {
            $('.showThis').removeClass('showThis').addClass('hideThis');
            $(this).html('... show more');
        }

    });

Answer 6

you need to change script like this

$('.showMoreText').click(function(){

    var text = $(this).html();

    if(text == '... show more'){

        $('.hideThis').toggleClass('showThis');
        $(this).html('... show less');

    }else {
        $('.hideThis').toggleClass('showThis');
        $(this).html('... show more');
    }

});

here is the example

http://jsfiddle.net/QSRxn/