Ok, bearing in mind this JQuery is all new to me today how would I go about doing this?
I have 2 or more elements that have the same features (click to hide, click to show). Each element also has within it a click to show even more info, and then click to hide more info (using toggle function.
The thing is, the code is starting to get repetative - there must be a way to eliminate some of the code? Here's what I have....
for my javascript in the head section:
javascript Code:
$(document).ready(function(){
// Hide the info element by default
$('#fixinfo').toggle();
// Provides function show/hide elements
$('#hidefixtures').click(function(event){
event.preventDefault();
$('#fixtures').toggle("slow");
});
$('#showfixinfo').click(function(event){
event.preventDefault();
$('#fixinfo').toggle("slow");
});
// Hide the info element by default
$('#resinfo').toggle();
// Provides function show/hide elements
$('#hideresults').click(function(event){
event.preventDefault();
$('#results').toggle("slow");
});
$('#showresinfo').click(function(event){
event.preventDefault();
$('#resinfo').toggle("slow");
});
});
and for each HTML element:
HTML Code:
<div class="wrapper">
<h1 id="hideresults" class="toggle">Recent Results</h1>
<div id="results">
<p>Test</p>
<p id="showresinfo" class="toggle" class="p">
<a href="">More info</a>
</p>
<p id="resinfo" class="p">
<b>Type:</b> Friendly<br />
<b>Venue:</b> Home<br />
<b>Kick-Off:</b> 10:30<br />
<b>Score:</b> 3 - 2
</p>
</div>
</div>
HTML Code:
<div class="wrapper">
<h1 id="hidefixtures" class="toggle">Upcoming Fixtures</h1>
<div id="fixtures">
<p>Test</p>
<p id="showfixinfo" class="toggle" class="p">
<a href="">More info</a>
</p>
<p id="fixinfo" class="p">
<b>Type:</b> Friendly<br />
<b>Venue:</b> Home<br />
<b>Kick-Off:</b> 10:30
</p>
</div>
</div>
I'm sure you'll agree it's a bit tedious, especially the more elements I add! Any help appreciated
