2 replies [Last post]
Joshwalkere
Joshwalkere's picture
Offline
newbie
Ohio
Last seen: 8 years 15 weeks ago
Ohio
Timezone: GMT-7
Joined: 2013-08-14
Posts: 2
Points: 3

I'm trying to create a code that will allow me to put a show/hide div inside of another show/hide div but when I click the second div (the show/hide div located inside of the other show/hide dive) it makes the other copied divs in the other colums collapse also and when I click the button the buttons that drop down from the first div it also makes everything else collapse. How do I make it so that it each column drop down individually when clicked and how do I make it so that when the buttons are clicked in the second div it makes another set of div buttons drop down? I'm new so go easy.

Here's my code so far

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
   $("p").toggle();
 });
 $("button").click(function(){
   $("p").toggle1();
 });
});
</script>
</head>
<body>
 
<table border="1">
<tr>
<td><center><button id=toggle>Phone</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle1>Tablet</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle>Laptop</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle1>Computer</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle>Camera</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle>Television</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
 
</body>
</html>

Here's an example of how I want it: http://www.gazelle.com/

I'm strictly CSS, HTML, Javascript and jquery

Please include the full code because I'm trying to learn and I don't know how to put tiny parts of codes in.

Joshwalkere
Joshwalkere's picture
Offline
newbie
Ohio
Last seen: 8 years 15 weeks ago
Ohio
Timezone: GMT-7
Joined: 2013-08-14
Posts: 2
Points: 3

Put multiple show/hide divs within other show/hide divs in Java

I'm trying to create a code that will allow me to put a show/hide div inside of another show/hide div but when I click the second div (the show/hide div located inside of the other show/hide dive) it makes the other copied divs in the other colums collapse also and when I click the button the buttons that drop down from the first div it also makes everything else collapse. How do I make it so that it each column drop down individually when clicked and how do I make it so that when the buttons are clicked in the second div it makes another set of div buttons drop down? I'm new so go easy.

Here's my code so far

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
  $("button").click(function(){
    $("p").toggle1();
  });
});
</script>
</head>
<body>
 
<table border="1">
<tr>
<td><center><button id=toggle>Phone</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle1>Tablet</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle>Laptop</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle1>Computer</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle>Camera</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
<td><center><button id=toggle>Television</button></center>
<br />
<p><button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button> <button id=toggle>Phone</button></p>
</td>
 
 
</body>
</html>

Here's an example of how I want it: http://www.gazelle.com/

I'm strictly CSS, HTML, Javascript and jquery

Please include the full code because I'm trying to learn and I don't know how to put tiny parts of codes in.

antoniosalandra
antoniosalandra's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT+5
Joined: 2013-11-12
Posts: 2
Points: 2

That's Good you information

That's Good you information is very useful for me.