Here is a simple sample of some JQuery code I had to use to implement hide/show functionality of news articles.
For a recent project, the site was built using Ektron as the Content Management System. There was a News page, where news articles entered into Ektron were dynamically displayed. In Ektron, the client could enter the news title, and intro paragraph, and then the complete story. The design of the site needed the title and intro paragraphs to display, then clicking a 'Read More' link would hide the intro and show the entire article. If one article was expanded, it should remain expanded until the user clicked 'Collapse Story'.
I was able to use JQuery to dynamically insert the 'Read More' link and control the click functionality of that link.
Assume a news article would have the following format:
<div class="newsArticle">
<h2>Event Title</h2>
<div class="newsIntro">
<p>This is an example of what a news story will look like. this is where the story cuts off...</p>
</div>
<div class="newsMore">
<p>This is an example of what a news story will look like. this is where the story cuts off...Except now here's the rest of the content.</p>
</div>
</div>
(The CSS for the classes would only contain stylist elements, such as font size & color.)
Here is the JQuery script I used to implement the read more / collapse story functionality.
<script src="./js/jquery-1.2.6.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the news Story .. looks up the element by class name
$(".newsMore").hide();
//insert toggle anchor tag at the end of each element with class 'newsArticle'
$('.newsArticle').append('<a id="myLink" class="newsLink">Read More</a>');
//toggle the anchor tag
$(".newsLink").toggle(function()
{
//hide the intro, show the full story, change the link text
$(this).prevAll(".newsIntro").toggle();
$(this).prev(".newsMore").toggle();
$(this).html("Collapse Story");
},function(){
//show the intro, hide the full story, change the link text
$(this).prevAll(".newsIntro").toggle();
$(this).prev(".newsMore").toggle();
$(this).html("Read More");
});
});
</script>