pclipwd Posted June 22, 2012 Share Posted June 22, 2012 I'm using the following jQuery function: $(document).ready(function(){$("#block-views-eriks-diary-block-1 .views-field-body").hide();$(".views-row-1 .readmore").toggle(function(){ $(this).addClass("expanded"); }, function () { $(this).removeClass("expanded");});$(".readmore").click(function(){ $("#block-views-eriks-diary-block-1 .views-row-1 .views-field-body").slideToggle("slow");});}); Is there any way to change this function so that .views-row-# can vary from 1 to 9 without having to add multiple versions of this snippet with .views-row-1, .views-row-2, etc.?I'm pretty new to jQuery so I'm not familiar with all the ins and outs yet... Any help would be appreciated! Link to comment Share on other sites More sharing options...
Ingolme Posted June 22, 2012 Share Posted June 22, 2012 It seems you're not familiar with Javascript. You can use a loop. var i;for(i = 1; i <= 9; i++) { $(".views-row-" + i + " .readmore").toggle(function() { ... more code here }} Link to comment Share on other sites More sharing options...
dsonesuk Posted June 22, 2012 Share Posted June 22, 2012 (edited) Use jquery each(), index(), parent() to look for readmore class, look at its parent, apply class views-row-# where # will be index ref of parent (+1), then add toggle, click functions at the same time. $(document).ready(function(){$(".readmore").each(function(){$(this).parent().addClass("views-row-"+($(this).parent().index()+1));$(".views-row-"+($(this).parent().index()+1)+" .readmore").toggle(function(){ $(this).addClass("expanded"); }, function () { $(this).removeClass("expanded");});$(".readmore").click(function(){ $("#block-views-eriks-diary-block-1 .views-row-"+($(this).parent().index()+1)+" .views-field-body").slideToggle("slow");});});}); Edited June 22, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
pclipwd Posted June 23, 2012 Author Share Posted June 23, 2012 Thanks for your response!What if I'd like to select another child of the grandparent of the current item? <div class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-field-inleiding"> <div class="field-content"> <a title="Lees meer..." href="#" class="readmore">Read more...</a> </div> </div> <div class="views-field views-field-body" style="display: none;"> <div class="field-content">CONTENT</div> </div></div> So let's say the current item is <a title="Lees meer..." href="#" class="readmore">Read more...</a> and I would like to select <div class="views-field views-field-body" style="display: none;"> I managed to select the parent item <div class="views-row views-row-1 views-row-odd views-row-first"> using the following snippet: $("#block-views-eriks-diary-block-1 .readmore").click(function(){ $(this).parent().parent().parent().slideToggle("slow");}); But how can I select a child item? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2012 Share Posted June 23, 2012 (edited) that is the sibling of the second parent, so you would use next() $(this).parent().parent().next() Edit:if you want to target specific parent you should use .closest(".target_class") save you using parent().parent()... and so on, this moves up the dom tree until it find the first target selection class name, parents(".target_class") will works similar but! it stores all of the parents before finally filtering out to the target classname. Edited June 23, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
pclipwd Posted June 23, 2012 Author Share Posted June 23, 2012 Thanks, it works perfectly! Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2012 Share Posted June 23, 2012 see edit of previous post 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