Jump to content

toggle using independent elements on same page


princesohrab
 Share

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

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
 Share

×
×
  • Create New...