CODEWITHSUNDEEP
jqueryhtmlcss
Manish Malviya
Manish Malviya

Reputation: 871

How to change the class of all li of current ul?

i have 1 ul with various class of li.

<ul class="" style="margin: 0 0 0 5px;">
    <li>
        <aclass="cam_title">
        Couple Watches</a>
    </li>
    <li>
        <a class="cam_title">
        Titan Men's Watches</a>
    </li>
    <li>
        <a class="cam_title">
        Timex Men</a>
    </li>
    <li class="hidden_camaign" style="display:none;">
        <a>Casio Men</a>
    </li><li class="hidden_camaign" style="display:none;">
        <a>Casio women</a>
    </li><li class="hidden_camaign" style="display:none;">
        <a>Casio unisex</a>
    </li>
    <li><a class="see_more" href="javascript">See more</a></li> 
</ul>

I want on $( '.see_more' ).click(function(){ do change the class to show_campaign of all li which has class hidden_campaign }

Upvotes: 1

Views: 717

Answers (4)

Sachin
Sachin

Reputation: 40970

Basically you want toggling effect in jQuery. So better to use slideToggle function which also give you smooth transition effect. As well as you also want to change the text of the link. Here is the solution.

$('.see_more').click(function () {
   var btn = $(this);
   $(this).closest('li').siblings('.hidden_camaign').slideToggle('slow', function () {
      if ($(this).is(':visible')) {
         $(btn).text('See Less');
      }
      else {
         $(btn).text('See more');
      }
   })
});

Js Fiddle Demo

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67197

You have to use .closest(), .siblings() and .toggleClass() to achieve what you want.

Try,

 $( '.see_more' ).click(function(){ 
   $(this).closest('li').siblings('.hidden_camaign').toggleClass('hidden_camaign show_campaign');
 });

Upvotes: 2

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

you can access using the parent ul and its child selectors for your requirement 

$( '.see_more' ).click(function(){
    $(this).parent("ul").find("li.hidden_camaign").addClass("show_camaign").removeClass("hidden_camaign");

    });

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

use:

$('.see_more' ).click(function(){ 
   $(this).closest('ul').find('.hidden_camaign').removeClass('hidden_camaign').addClass('show_campaign ');
});

Upvotes: 1

Related Questions