Question

Hello friends i am new on jQuery and trying to make a toggle effect. My code is working fine but i also want to to toggle text in it please check following code

Script

$('.read_more_list').click(function() {
    $(".design_list").slideToggle();
    if ($(this).children('a').html() == 'more') {
        $(this).children('a').html('less');
    }
    if ($(this).children('a').html() == 'less') {
        $(this).children('a').html('more');
    }
})​

HTML

<ul class="design_list" style="display: none;">
            <li><a href="#">eCommerce</a></li>
            <li><a href="#">Display  Creatives</a></li>
            <li><a href="#">Logo Design  Services</a></li>
            <li><a href="#">Microsites</a></li>
          </ul>
<div class="read_more_list"><a href="javascript:void(0);">more</a></div>

I want when user click on more then it will convert into less and when user again click on it then it will change into more

Please help me friends thanks in advance… :))

Answer 1

jsBin demo

$('.read_more_list a').click(function(e){  
    e.preventDefault();

    $(".design_list").slideToggle();
    $(this).text( $(this).text()=='more'?'less':'more' );

});

HTML:

<a href="#">more</a>

• You don’t need the inline JS void or anything for your A button, just use the event handler event.preventDefault().
• To toggle your text you can use a simple Ternary operator $(this).text()=='more'?'less':'more'

Just to remind you about Ternary: [statement] ? [if true] : [if false] ;