Welcome to WebmasterWorld Guest from 54.204.162.36

Forum Moderators: open

Show and Hide content with Jquery and different sections

   
12:57 pm on Dec 16, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I have working code to Show/Hide content when clicked on link of particular section:
var showText="Show content FAQ1";
var hideText="Hide content FAQ1";

1. How to do link on particular Title and show this description like Description1, Description2 etc.
2. How to open some sections in advance inside Javascript?

Working code is the following using Jquery jqueryV1.4.4:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Show/Hide content</title>
<script type="text/javascript" src="jqueryV1.4.4.min.js"></script>
</head>

<body>
<h2>Demo of the accessible show/hide code</h2>
<script type="text/javascript">
<!--
$(document).ready(function() {

var showText="Show content FAQ1";
var hideText="Hide content FAQ1";

$("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a>");

$('#hide_this').hide();

$('a#toggle_link').click(function() {

if ($('a#toggle_link').text()==showText) {
$('a#toggle_link').text(hideText);
}
else {
$('a#toggle_link').text(showText);
}
$('#hide_this').toggle('fast');

// return false so any link destination is not followed
return false;
});

});
//-->
</script>

<b>Title1</b>
<div id="hide_this">
<p>
Description1.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
<b>Title2</b>
<div id="hide_this">
<p>
Description2.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>
</div>
</body>

</html>
2:25 pm on Dec 17, 2011 (gmt 0)



Look at the post a few down and see if it give you any ideas.
[url]
[webmasterworld.com...]
[/url]
 

Featured Threads

Hot Threads This Week

Hot Threads This Month