homepage Welcome to WebmasterWorld Guest from 54.198.140.182
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Show and Hide content with Jquery and different sections
toplisek




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

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>

 

tw56




msg:4399001
 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved