Help with jQuery, Show/Hide (HTML)?

  • Thread starter Thread starter Reave
  • Start date Start date
R

Reave

Guest
Im trying to figure out how to make the script smaller instead of calling a new function every time I add html code and want the show/hide effect.

/////////////////////// Script ////////////////////////

jQuery(document).ready(
function() { jQuery('#toggle1').hide(); jQuery('a#slide1').click(
function() { jQuery('#toggle1').slideToggle(300); return false; }); });

jQuery(document).ready(
function() { jQuery('#toggle2').hide(); jQuery('a#slide2').click(
function() { jQuery('#toggle2').slideToggle(300); return false; }); });

jQuery(document).ready(
function() { jQuery('#toggle3').hide(); jQuery('a#slide3').click(
function() { jQuery('#toggle3').slideToggle(300); return false; }); });

jQuery(document).ready(
function() { jQuery('#toggle4').hide(); jQuery('a#slide4').click(
function() { jQuery('#toggle4').slideToggle(300); return false; }); });


/////////////////////// HTML ////////////////////////

<h3><a href="#" id="slide1">Homepage</a></h3>
<div id="toggle1"><h4>Welcome To Advanced Technologies</h4>
<h4>Technology You Can Count On</h4></div>
<h3><a href="#" id="slide2">News</a></h3>
<div id="toggle2"><h4>Coprerate Bulitin Board</h4></div>
<h3><a href="#" id="slide3">About Us</a></h3>
<div id="toggle3"><h4>Company</h4>
<h4>Client Testimonials</h4>
<h4>Our Mission</h4>
<h4>The Team</h4>
<h4>Overview</h4></div>
<h3><a href="#" id="slide4">Services</a></h3>
<div id="toggle4"><h4>Global Communications</h4>
<h4>Secure Cloud Computing</h4>
<h4>Software Security Solutions</h4>
<h4>3D Surveillance Systems</h4></div>
 
Back
Top