DizzyDan Posted November 21, 2014 Share Posted November 21, 2014 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 More sharing options...
justsomeguy Posted November 21, 2014 Share Posted November 21, 2014 jQuery has addClass and removeClass methods that you can use to add or remove a CSS class to the element that will change the style to show it as active, however you want it to show. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 21, 2014 Author Share Posted November 21, 2014 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 More sharing options...
justsomeguy Posted November 21, 2014 Share Posted November 21, 2014 I would just have that class already on that element when the page loads. Link to comment Share on other sites More sharing options...
DizzyDan Posted November 21, 2014 Author Share Posted November 21, 2014 (edited) I tried that but it doesn't remove it when you click the next category https://amacsmallbiz.com/benefits-test/ Edited November 21, 2014 by DizzyDan Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2014 Share Posted November 21, 2014 That would be the better option, but you could add it with $(function(){ $('li.regular').eq(0).addClass("active"); }); Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2014 Share Posted November 21, 2014 I tried that but it doesn't remove it when you click the next category https://amacsmallbiz.com/benefits-test/ cause you have replaced class 'regular' with 'active' it need to find li with 'regular' before removing 'active' class Link to comment Share on other sites More sharing options...
DizzyDan Posted November 21, 2014 Author Share Posted November 21, 2014 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 More sharing options...
dsonesuk Posted November 21, 2014 Share Posted November 21, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now