• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 442
  • Last Modified:

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.
0
ron4721
Asked:
ron4721
1 Solution
 
asianandrewCommented:
I believe this is what you want: http://jqueryui.com/demos/accordion/
0
 
ron4721Author Commented:
Thanks asianandrew!  Exactly what i was searching for!
0
 
prokvkCommented:
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>

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now