By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,036 Members | 960 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,036 IT Pros & Developers. It's quick & easy.

show/hide div one at a time JavaScript and jquery

P: 8
so i have this code...that includes three buttons in each div, and i only want to show one div at a time. so when i click a div1, the other divs will not open and when div1 is currently is opened, when i click the div2, div1 will close and div2 is now the current div opened and so on..

is it possible that i will not create multiple functions for each div, and change my div class and button class will be retained as much as possible....??

here is my code i just got this js from the net too...

Expand|Select|Wrap|Line Numbers
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3.  
  4. $(document).ready(function(){
  5.  
  6.     $(".slidingDiv").hide();
  7.     $(".show_hide").show();
  8.  
  9.     $('.show_hide').click(function(){
  10.     $(".slidingDiv").slideToggle();        
  11.     });    
  12. });
  13.  
  14. </script>
  15.       <button class="show_hide"> Add New</button>
  16.       <br />
  17.       <div class="slidingDiv">
  18.         <form action="" name="add" method="post">
  19.             </strong>
  20.             <tr>
  21.               <td>form1:</td>
  22.               <td width="225"><input type="text" name="amount" value="" />
  23.               </td>
  24.             </tr>             
  25.              <tr>
  26.               <td><input type="submit" name="Submit" value="Submit" />
  27.                 <input type="reset" value="Reset">
  28.               </td>
  29.             </tr>
  30.         </form>
  31.       </div>
  32.  
  33.           <button class="show_hide">Add New</button>
  34.       <br />
  35.       <div class="slidingDiv">
  36.         <form action="" name="add" method="post">
  37.             </strong>
  38.             <tr>
  39.               <td>form2</td>
  40.               <td width="225"><input type="text" name="amount" value="" />
  41.               </td>
  42.             </tr>             
  43.              <tr>
  44.               <td><input type="submit" name="Submit" value="Submit" />
  45.                 <input type="reset" value="Reset">
  46.               </td>
  47.             </tr>
  48.         </form>
  49.       </div>
  50.  
  51.                 <button class="show_hide">Add New</button>
  52.       <br />
  53.       <div class="slidingDiv">
  54.         <form action="" name="add" method="post">
  55.             </strong>
  56.             <tr>
  57.               <td>form3</td>
  58.               <td width="225"><input type="text" name="amount" value="" />
  59.               </td>
  60.             </tr>             
  61.              <tr>
  62.               <td><input type="submit" name="Submit" value="Submit" />
  63.                 <input type="reset" value="Reset">
  64.               </td>
  65.             </tr>
  66.         </form>
  67.       </div>
  68.  
i would really appreciate your help guys....
Dec 15 '11 #1

✓ answered by zorgi

Your markup is broken. Fix that before using jquery on it.

Share this Question
Share on Google+
2 Replies


zorgi
Expert 100+
P: 431
Your markup is broken. Fix that before using jquery on it.
Dec 15 '11 #2

P: 8
thanks so much.....it works great

Expand|Select|Wrap|Line Numbers
  1.   $(document).ready(function(){
  2.  
  3.        $(".slidingDiv").hide();
  4.        $(".show_hide").show();
  5.  
  6.        $('.show_hide').click(function(){
  7.            $('.slidingDiv').hide(1);
  8.            $(this).nextAll().eq(1).show();
  9.        });
  10.    })
  11.  
  12.  
  13.  
i just modified it a little..so that the currently opened div will still hide when you click the button..thanks
Dec 16 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.