help with 2 collapsable divs side by side
http://www.ipcamhd.com/catalog-test2.htmlhttp://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. :confused:
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>
