princesohrab Posted October 11, 2012 Share Posted October 11, 2012 How do I use this script for multiple element which works independently on the same page, can anyone help please.. <script type="text/javascript" >$(document).ready(function() { $(".slideDiv").hide(); $(window).load(function () { $(".toggle").click(function () { $(".slideDiv").slideToggle(800);<!----change to any amount or use presets "slow" "fast" etc-----> });});});</script> The html bit: <div class="toggle"> Click To Read More</div><div class="slideDiv"> <div class="p-text-wrap-box-1-left"> <p>We are a company providing tours, siteseeing, outing and contractual service to tourist industry and includes hotels and tourists related businesses. We run a pre-booked system and we are always ready to be on the move at any given time. <a href="about.html">Read more</a> about us.</p> </div><!--ends p-text-wrap-box-1-left--></div><!--slideDiv--> Link to comment Share on other sites More sharing options...
princesohrab Posted October 11, 2012 Author Share Posted October 11, 2012 It works when I have 2 different scripts with different elements but I am trying to figure out how to make them all work in one snippet.. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 11, 2012 Share Posted October 11, 2012 That code will apply to any element with the classes that it's looking for. If you have multiple elements with the toggle and slidediv classes then it will apply to all of them. The code to do the animation should be changed to target the child of the toggle element instead of any slidediv. For jQuery I believe you would use $(this).children('.slidediv') to only target the child element with the class slidediv. 1 Link to comment Share on other sites More sharing options...
princesohrab Posted October 11, 2012 Author Share Posted October 11, 2012 Thanks, Ill give it a try Link to comment Share on other sites More sharing options...
dsonesuk Posted October 11, 2012 Share Posted October 11, 2012 It should in fact target the next SIBLING with classname of ".slideDiv", that follows the currently clicked element with classname '.toggle', as in $(this).next(".slideDiv").slideToggle(800);<!----change to any amount or use presets "slow" "fast" etc-----> altogether it would be $(document).ready(function(){ $(".slideDiv").hide(); //$(window).load(function () { // NOT REQUIRED same as $(document).ready(function() $(".toggle").click(function () { $(this).next(".slideDiv").slideToggle(800);<!----change to any amount or use presets "slow" "fast" etc-----> }); //});NOT REQUIRED }); Link to comment Share on other sites More sharing options...
justsomeguy Posted October 11, 2012 Share Posted October 11, 2012 Right, when I glanced at the HTML code above I assumed slidediv was a child of toggle. Link to comment Share on other sites More sharing options...
princesohrab Posted October 12, 2012 Author Share Posted October 12, 2012 No, slideDiv and toggle are separate.. Basically, when u click on on toggle, it opens hidden slideDiv 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