help with 2 collapsable divs side by side

**mlegg** · 12-15-2012, 12:11 AM

http://www.ipcamhd.com/catalog-test2.html http://www.ipcamhd.com/catalog-test2.html is my test page.

I don't want to use tables. I need to put items 3 wide next to each other, not sure how many rows yet, but this is my start. With my test page the Open/Close Specs button only opens and closes the far left item.

HTML

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   
<title>IPCamHD.com Our Cameras are all HD. Demand it for your Security!</title>
    
<link rel="stylesheet" type="text/css" href="styles2.css">
    
  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Video Surveillance Products designed around our customers particular needs. Our expert Surveillance consultant has over 35 years experience in the business. Our Cameras are all HD. You demand it on your Television. Demand it for your Security!Video Surveillance In-A-Box is the result of exhaustive research and testing. My company has exclusive factory direct purchase power. No useless, costly middle-man or monthly fees!">
<meta name="keywords" content="IP CAM 2012, security camera, surveillance, wireless camera, surveillance camera, security video, spy camera, home security camera, surveillance camera, VPN software, Stop Identity Theft, IP Cam 2012, security equipment, monitoring equipment, intelligent monitoring, DVR, hard disk recorders, network cameras, security, video monitoring, NVR, network hard disk video recorder">
<meta name="author" content="Matt Pilon Sr.">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script>
		$(document).ready(function() {
		  $('.nav-toggle').click(function(){
			//get collapse content selector
			var collapse_content_selector = $(this).attr('href');					
 
			//make the collapse content to be shown or hide
			var toggle_switch = $(this);
			$(collapse_content_selector).toggle(function(){
			  if($(this).css('display')=='none'){
                                //change the button label to be 'Open/Close Specs'
				toggle_switch.html('Open/Close Specs');
			  }else{
                                //change the button label to be 'Open/Close Specs'
				toggle_switch.html('Open/Close Specs');
			  }
			});
		  });
 
		});	
		</script>
		<style>	
		.round-border {
			border: 1px solid #eee;
			border: 1px solid rgba(0, 0, 0, 0.05);
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			padding: 10px;
			margin-bottom: 5px;
		}
		</style>
</head>
<body>

<div id="mainPicture"><img src="images/IPCamHD-logo.jpg"></div>

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="index.html">Home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="catalog.html">Products</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="support.html">Support</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="contact.html">Contact</a></li>
</ul>
<!-- End PureCSSMenu.com MENU -->
<div class="contentBox">

<div class="innerBox">

<div class="contentText">


<div class="wrapper">
    <div class="item"><section class="round-border">
			<h2>Camera Kit 1</h2>
			<div>
				<button href="#collapse1" class="nav-toggle">Open/Close Specs</button>
			</div>
			<div id="collapse1" style="display:none">
				<p>Camera kit 1 is hd for only $799</p></div>
		</section>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="LK5R7QEQPUSWY">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></div>
    
    <div class="item"><section class="round-border">
			<h2>Camera Kit 2</h2>
			<div>
				<button href="#collapse1" class="nav-toggle">Open/Close Specs</button>
			</div>
			<div id="collapse1" style="display:none">
				<p>Camera kit 1 is hd for only $799</p></div>
		</section>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="LK5R7QEQPUSWY">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></div>
    
    <div class="item"><section class="round-border">
			<h2>Camera Kit 3</h2>
			<div>
				<button href="#collapse1" class="nav-toggle">Open/Close Specs</button>
			</div>
			<div id="collapse1" style="display:none">
				<p>Camera kit 1 is hd for only $799</p></div>
		</section>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="LK5R7QEQPUSWY">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></div>
    
</div>



<div style="clear:both;"></div>

</div></div></div></div>


<div id="footer"><a href="http://ipcamhd.com/">IP Cam HD</a> / Cromwell Drive, San Antonio, TX, 78201 / <a href="mailto:mattpilonsr@ipcamhd.com">Matt Pilon Sr.</a> / Toll Free # (888) 320-5034</div>
</body></html>

**mlegg** · 12-15-2012, 12:12 AM

here is my css

Code:

body {
  margin: auto;
  color : #000000;
  background-color: #CCCCCC;
  background-repeat : repeat;
  max-width : 960px;
}
#pcm {
display : none;
}
ul.pureCssMenu ul {
display : none;
}
ul.pureCssMenu li:hover > ul {
display : block;
}
ul.pureCssMenu ul {
position : absolute;
left : -1px;
top : 98%;
}
ul.pureCssMenu ul ul {
position : absolute;
left : 98%;
top : -2px;
}
ul.pureCssMenu, ul.pureCssMenu ul {
margin : 0;
list-style : none;
padding : 0 2px 2px 0;
background-color : #595959;
background-repeat : repeat;
border-color : #aaaaaa;
border-width : 1px;
border-style : solid;
}
ul.pureCssMenu {
width : 631px;
padding-left : 325px;

}
ul.pureCssMenu table {
border-collapse : collapse;
}
ul.pureCssMenu {
display : block;
float : left;
}
ul.pureCssMenu ul {
width : 225px;
z-index : 10;
}
ul.pureCssMenu li {
display : block;
margin : 2px 5px 0 2px;
font-size : 0;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style : none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display : block;
vertical-align : middle;
background-color : #595959;
border-width : 0;
border-color : #FFFFFF;
border-style : solid;
text-align : left;
text-decoration : none;
padding : 4px;
font : 16px Georgia;
color : #ffffff;
text-decoration : none;
cursor : default;
}
ul.pureCssMenu span {
overflow : hidden;
}
ul.pureCssMenu li {
float : left;
}
ul.pureCssMenu ul li {
float : none;
}
ul.pureCssMenu ul a {
text-align : left;
white-space : nowrap;
}
ul.pureCssMenu li.sep {
text-align : center;
padding : 0;
line-height : 0;
height : 100%;
}
ul.pureCssMenu li.sep span {
float : none;
padding-right : 0;
display : inline-block;
background-color : #aaaaaa;
background-image : none;
}
ul.pureCssMenu ul li.sep span {
width : 80%;
}
ul.pureCssMenu li:hover {
position : relative;
}
ul.pureCssMenu li:hover > a {
background-color : #ffffff;
border-color : #595959;
border-style : solid;
font : 16px Georgia;
color : #595959;
text-decoration : none;
}
ul.pureCssMenu li a:hover {
position : relative;
background-color : #ffffff;
border-color : #595959;
border-style : solid;
font : 16px Georgia;
color : #595959;
text-decoration : none;
}
ul.pureCssMenu li.dis a {
color : #aaaaaa !important ;
}
ul.pureCssMenu img {
border : none;
float : left;
margin-right : 4px;
width : 16px;
height : 16px;
}
ul.pureCssMenu ul img {
width : 16px;
height : 16px;
}
ul.pureCssMenu img.over {
display : none;
}
ul.pureCssMenu li.dis a:hover img.over {
display : none !important ;
}
ul.pureCssMenu li.dis a:hover img.def {
display : inline !important ;
}
ul.pureCssMenu li:hover > a img.def {
display : none;
}
ul.pureCssMenu li:hover > a img.over {
display : inline;
}
ul.pureCssMenu a:hover img.over, ul.pureCssMenu a:hover ul img.def, ul.pureCssMenu a:hover a:hover img.over {
display : inline;
}
ul.pureCssMenu a:hover img.def, ul.pureCssMenu a:hover ul img.over, ul.pureCssMenu a:hover a:hover img.def {
display : none;
}
ul.pureCssMenu a:hover ul {
display : block;
}
ul.pureCssMenu span {
display : block;
background-image : url(./images/arrv_anim_1.gif);
background-position : right center;
background-repeat : no-repeat;
padding-right : 11px;
}
ul.pureCssMenu li:hover > a > span {
background-image : url(./images/arrv_anim_1o.gif);
}
ul.pureCssMenu ul span, ul.pureCssMenu a:hover table span {
background-image : url(./images/arr_double_1.gif);
}
ul.pureCssMenu ul li:hover > a span {
background-image : url(./images/arr_double_1o.gif);
}
ul.pureCssMenu table a:hover span {
background-image : url(./images/arr_double_1o.gif);
}
#mainPicture {
  height: 260px;
  width: 960px;
  background-image: url(images/IPCamHD-logo.jpg) no-repeat;
  padding-top: 10px;
  margin: auto;
}
.contentBox {
  font-family: Georgia;
  font-size:18px;
  clear:both;
}

.innerBox {
  background-color : #ffffff;
  background-repeat : repeat-y;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom : 1em;
}

table#yourtable {
  margin: 0 auto;
}

.wrapper{
    overflow:hidden; /*make sure the wrapper has no dimension*/
    background:white;
    margin-bottom:10px;
}

.item{
    float:left;
    width:285px;
    height:auto;
    background:blue;
    margin:10px;
}

#footer {
  background-color: #595959;
  max-width : 960px;
  text-align : center;
  font-size : 16px;
  font-family: Georgia;
  color : #FFFFFF;
  padding-top: 5px;
  padding-bottom: 5px;
}
#footer a:link {
color : #FFFFFF;
text-decoration : underline;
}
#footer a:visited {
color : #FFFFFF;
text-decoration : underline;
}
#footer a:hover {
color : #000000;
background-color : #FFFFFF;
text-decoration : underline;
}
#footer a:active {
color : #FFFFFF;
background-color : #FFFFFF;
text-decoration : underline;
}

**ajfmrf** · 12-15-2012, 12:28 AM

I would venture a guess that you will have to name them collapse1,collapse2,collapse3 and set them up as three different id's or you will be doing as you are getting-collapsing one div

**mlegg** · 12-15-2012, 04:24 PM

I would have thought that placing them in separate divs (left, right, and middle) would have taken care of them all collapsing at once.

Does anyone have any thoughts on this?

**mlegg** · 12-17-2012, 08:36 PM

I changed my code to just have 2 side by side columns http://www.ipcamhd.com/2column-test.html

this was added to the css

Code:

#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}

.clear
{
    clear:both;
}

If you look at my test page you will see the collapse works at the top of the page. When I try to add the code into the bottom part, the left column and right column, the collapse doesn't work.

Can someone help with this?