473,324 Members | 2,567 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

show/hide div one at a time JavaScript and jquery

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.

2 3891
zorgi
431 Expert 256MB
Your markup is broken. Fix that before using jquery on it.
Dec 15 '11 #2
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

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

Similar topics

5
by: Zambien | last post by:
Hi all, Here's my problem. I have tables that are using the menu/submenu idea for hiding rows. This works fine in IE (of course) and does show/hide correctly in netscape, but as soon as the...
10
by: oLE | last post by:
I would like to add some javascript to show/hide a certain row of a table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide...
5
by: dje | last post by:
In the OnClick event on a radioButtonList, I run a javascript to show/hide the appropriate div along with a submit button, which displays as expected. The problem is the submit no longer works on...
4
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however...
7
by: FP | last post by:
I'm new to Java Script. I'm displaying comments people have made. Below each persons' comment I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would display an empty text field...
1
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the...
3
by: therealvibe | last post by:
I have made a simple page with show hide layers with javascript and css. http://www.icatt.nl/special/test/salarisstrook_algemeen.html The idea is that the blue help text rechtangle will have...
1
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. ...
2
by: bela.patkai | last post by:
I have a css tabbed text menu (Home - Services - About - Contact) and would like to show appropriate text formatted in <divblocks on the webpage when clicking on the menu. Is it possible to do...
2
by: Scott McNeill | last post by:
I have created a form with show/hide on a couple of fields. However, this hidden info is not posting back when I click submit. Can someone help? Source code <?xml version="1.0"...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.