toggle text and classes

Question

Hi im looking for the best way to toggle some text and a class on click. I will also be changeing the background as well ( ill do this later)

I have a banner and on click i need to toggle some text and a class on a p ( that hides and shows)

My general thinking is below ( i know the last two lines of js will not work)

what would be the best way to achieve this

<div class="banner">
     <div class="content-holder">
     <h2>xxxx</h2>
     <p>xxxxxx</p>
     <p class="hidden">xxxx</p>
     <button type="button" class="tell-more">Tell me more</button>
 </div>

$(".tell-more").on("click",function(){
    $(this).html($(this).html() == 'Tell me more' ? 'close' : 'Tell me more');
    $(".banner p.hidden").removeClass("hidden").addClass("show");
    $(".banner p.show").removeClass("show").addClass("hidden");
})

just made fiddle http://jsfiddle.net/T3G42/

Answer 1

You can set a specific class eg. more for the more text paragraph and then toggle its visibility using toggle.

Code:

$(".tell-more").on("click",function(){
    $(this).html($(this).html() == 'Tell me more' ? 'close' : 'Tell me more');
    $(".banner p.more").toggle();
})

Demo: http://jsfiddle.net/BcJLR/

Answer 2

Try with .toggle()

$(".tell-more").on("click",function(){
    $('h2').toggle();
    $('p.hidden').toggle();
})

Answer 3

Try

$(".tell-more").on("click", function () {
    $(this).html(function(i,html){
        return html == 'Tell me more' ? 'close' : 'Tell me more'
    });
    $(this).prev().toggleClass("hidden show");
})

Demo: Fiddle