ron4721
asked on
jQuery -- links -- on click show one div/hide the rest
Hi,
Is there an available jQuery script where i can have 4 links. When the user clicks on one of them, it shows a hidden div below the link (the div would have a photo and text). When the user clicks on a different link, it shows the hidden div for this different link, AND hides all other divs, etc...
Thanks,
-Ron.
Is there an available jQuery script where i can have 4 links. When the user clicks on one of them, it shows a hidden div below the link (the div would have a photo and text). When the user clicks on a different link, it shows the hidden div for this different link, AND hides all other divs, etc...
Thanks,
-Ron.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page title</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
$(function () {
$('a').click(function () {
$('div.desc').hide();
$(this).next('div.desc').show();
return false;
});
});
</script>
</head>
<body>
<a href="">Link 1</a>
<div class="desc" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus dui, dictum vel, pellentesque a, pharetra sagittis, risus. Praesent feugiat sollicitudin erat. Curabitur sollicitudin. Nam ultricies. Etiam iaculis dapibus ligula. Integer accumsan diam id elit. Cras luctus. Duis lacus erat, egestas
</div>
<br />
<a href="">Link 2</a>
<div class="desc" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus dui, dictum vel, pellentesque a, pharetra sagittis, risus. Praesent feugiat sollicitudin erat. Curabitur sollicitudin. Nam ultricies. Etiam iaculis dapibus ligula. Integer accumsan diam id elit. Cras luctus. Duis lacus erat, egestas
</div>
<br />
<a href="">Link 3</a>
<div class="desc" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus dui, dictum vel, pellentesque a, pharetra sagittis, risus. Praesent feugiat sollicitudin erat. Curabitur sollicitudin. Nam ultricies. Etiam iaculis dapibus ligula. Integer accumsan diam id elit. Cras luctus. Duis lacus erat, egestas
</div>
<br />
<a href="">Link 4</a>
<div class="desc" style="display: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus dui, dictum vel, pellentesque a, pharetra sagittis, risus. Praesent feugiat sollicitudin erat. Curabitur sollicitudin. Nam ultricies. Etiam iaculis dapibus ligula. Integer accumsan diam id elit. Cras luctus. Duis lacus erat, egestas
</div>
</body>
</html>
ASKER