?
Solved

multiple hide

Posted on 2012-03-13
5
Medium Priority
?
207 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 200 total points
ID: 37718609
0
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 200 total points
ID: 37718610
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 1800 total points
ID: 37719256
Here is your solution:

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

Assisted Solution

by:Mrunal
Mrunal earned 1800 total points
ID: 37719261
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
ID: 37720641
thanks guys.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…
Suggested Courses

752 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