Jump to content

toggle using independent elements on same page


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...