Jump to content

Active Item Class


DizzyDan

Recommended Posts

I created a toggle with several categories which works perfectly but I want the active category to have it's own class. Can you help me out or point me in a direction of a tutorial that can bring clarity for me.

 

Page URL: https://amacsmallbiz.com/benefits-test/

 

Script

// toggle Discounts and Offersfunction slideonlyone(thechosenone) {     $('.newboxes2').each(function(index) {        if ($(this).attr("id") == thechosenone) {           $(this).fadeIn(600);        }        else {           $(this).fadeOut(0);        }    });}

HTML

<ul class="benefit-cat-wrap col-md-3">  <li class="benefit-cat">    <a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><h3>Benefits & Savings</h3></a>  </li>           <li class="benefit-cat">    <a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><h3>Business Insurance Programs</h3></a>  </li>          <li class="benefit-cat">    <a id="myHeader3" href="javascript:slideonlyone('newboxes3');" ><h3>Employer Sponsored Health & Life Insurance</h3></a>  </li>        <li class="benefit-cat">    <a id="myHeader4" href="javascript:slideonlyone('newboxes4');" ><h3>Other</h3></a>  </li></ul><div class="benefit-sect-wrap cold-md-9">   <div class="benefit-sect newboxes2" id="newboxes1">     <p>First Category</p>  </div>   <div class="benefit-sect newboxes2" id="newboxes2">     <p>Second Category</p>  </div>   <div class="benefit-sect newboxes2" id="newboxes3">     <p>ThirdCategory</p>  </div>  <div class="benefit-sect newboxes2" id="newboxes4">     <p>Forth Category</p>  </div> </div>

 

Link to comment
Share on other sites

OK I got the addClass to work, how can I have the first <li> start with the active class?

 

Script

// toggle Discounts and Offersfunction slideonlyone(thechosenone) {     $('.newboxes2').each(function(index) {        if ($(this).attr("id") == thechosenone) {           $(this).fadeIn(600);        }        else {           $(this).fadeOut(0);        }    });}// active class on benefits menu$('li.regular').click(function(){    $('li.regular').removeClass("active");    $(this).addClass("active");});

HTML

		<ul class="benefit-cat-wrap col-md-3">			<li class="benefit-cat regular">				<a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><h3>Benefits & Savings</h3></a>			</li>         			<li class="benefit-cat regular">				<a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><h3>Business Insurance Programs</h3></a>			</li>        			<li class="benefit-cat regular">				<a id="myHeader3" href="javascript:slideonlyone('newboxes3');" ><h3>Employer Sponsored Health & Life Insurance</h3></a>			</li>      			<li class="benefit-cat regular">				<a id="myHeader4" href="javascript:slideonlyone('newboxes4');" ><h3>Other</h3></a>			</li>		</ul>
Link to comment
Share on other sites

OK I think that did the trick!

// toggle Discounts and Offers categoriesfunction slideonlyone(thechosenone) {     $('.newboxes2').each(function(index) {        if ($(this).attr("id") == thechosenone) {           $(this).fadeIn(600);        }        else {           $(this).fadeOut(0);        }    });}// start first caltegory with active class$(function(){$('li.regular').eq(0).addClass("active"); });// replace regular active class on categories$('li.regular').click(function(){    $('li.regular').removeClass("active");    $(this).addClass("active");});
Link to comment
Share on other sites

I should place jquery click functions with in page load, but it depends where this code is placed

//page load$(function(){$('li.regular').eq(0).addClass("active");// replace regular active class on categories$('li.regular').click(function(){$('li.regular').removeClass("active");$(this).addClass("active");});// end click});// end page load
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...