Solved

multiple hide

Posted on 2012-03-13
5
186 Views
Last Modified: 2012-03-14
the below function works fine for one hide and show.
how to optimize it for any number of hide and show?


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {      
            $('#onelink').hide();
            $('#twolink').hide();
            $('#threelink').hide();
      $('span.ud').toggle(             
            function() {
                  $('#onelink').show();
                  $(this).html('<img alt="up" border="2">');
            },
            function() {
                  $('#onelink').hide();
                  $(this).html('<img alt="down" border="1">');
            }
      );
      
      
});
</script>
</head>
<body>
<p>
      <a href="#" class="toggle">hello 1</a><span class="ud">down</span>
</p>
<ul id="onelink"  class="branch1">
    <li><a href="#">1one</a> </li>
    <li><a href="#">1three</a></li>
</ul>
<p>
      <a href="#" class="toggle">hello 2</a><span class="ud">down</span>
</p>
<ul id="twolink"  class="branch2">
    <li><a href="#">1one</a> </li>
    <li><a href="#">1three</a></li>
</ul>
<p>
      <a href="#" class="toggle">hello 3</a><span class="ud">down</span>
</p>
<ul id="threelink"  class="branch3">
    <li><a href="#">1one</a> </li>
    <li><a href="#">1three</a></li>
</ul>

</body>
</html>
0
Comment
Question by:jcbmtt
  • 2
  • 2
5 Comments
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 50 total points
Comment Utility
0
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 50 total points
Comment Utility
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 450 total points
Comment Utility
Here is your solution:

http://jsfiddle.net/3mh6f/
0
 
LVL 22

Assisted Solution

by:Mrunal
Mrunal earned 450 total points
Comment Utility
OR modify your function as below:

$(document).ready(function() {      
      $('ul.branch').hide();    
      $('span.ud').toggle(
            function() {
                  $(this).parent().next().show();
                  $(this).html('<img alt="up" border="2">');
            },
            function() {
                  $(this).parent().next().hide();
                  $(this).html('<img alt="down" border="1">');
            }
      );
});
0
 

Author Closing Comment

by:jcbmtt
Comment Utility
thanks guys.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now