TalkPHP - View Single Post

Salathe · 06-23-2009, 08:16 PM

You could stop the repeated JavaScript by making use of appropriate classes (on which to hook events, animations, etc.) rather than referencing individual elements by ID.

For example:

JavaScript Code:

// Shorthand equivalent to: jQuery(document).ready(…);
jQuery(function($){

    // Hide the "more info" blocks
    $('.more-info').hide();
    
    // "more info" links toggle "more info" blocks
    $('.more-toggle').toggle(function(e){
        e.preventDefault();
        $(this).text("Less info")
            .parent().next(".more-info").show("slow");
    }, function(e){
        e.preventDefault();
        $(this).text("More info")
            .parent().next(".more-info").hide("slow");
    });
    
});

Assuming your HTML blocks are like (note they're changed a bit from yours above):

HTML Code:

<div class="wrapper">
	<h1>Recent Results</h1>
	<div id="results">
		<p>Test</p>
		<p id="showresinfo">
			<a href="" class="more-toggle">More info</a>
		</p>
		<p id="resinfo" class="more-info">
			<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>

The functions (…parent().next…) are traversing the document to get from the link to the element to be shown/hidden.