Kris Kris -4 years ago 43
CSS Question

JQuery accordion menu with nested accordion menus

I'm putting together a series of nested accordion menus, but it seems that when I try to expand child menus, the parent menu will collapse, and then the behavior of the entire menu goes haywire. Worth noting is that I've commented out (line 37 of the CSS on JSFiddle) to at test some of the nested behaviors, but my intended state is for all parent menus to default to being closed.

My code:



$('.product-title').hover(function() {
$(this).toggleClass('hover');
});
var lastItem;
$('.product-title').click(function(currentItem) {
var currentItem = $(this);
if ($(this).next().height() == 0) {
$(lastItem).css({
'font-weight': 'normal'
});
$(lastItem).next().animate({
height: '0px'
}, 400, 'swing');
$(this).css({
'font-weight': 'bold'
});
$(this).next().animate({
height: '100%',
opacity: 1
}, 400, 'swing');
} else {
$(this).next().animate({
height: '0px',
opacity: 1
}, 400, 'swing');
}
lastItem = $(this);
});
$(function() {
$('.product-title').click(function() {
$(this).find('i').toggleClass('plus-KO minus-KO');
});
});
$('.product-name').hover(function() {
$(this).toggleClass('hover');
});
var lastItem;
$('.product-name').click(function(currentItem) {
var currentItem = $(this);
if ($(this).next().height() == 0) {
$(lastItem).css({
'font-weight': 'normal'
});
$(lastItem).next().animate({
height: '0px'
}, 400, 'swing');
$(this).next().animate({
height: '100%',
opacity: 1
}, 400, 'swing');
} else {
$(this).css({
'font-weight': 'normal'
});
$(this).next().animate({
height: '0px',
opacity: 1
}, 400, 'swing');
}
lastItem = $(this);
});
$(function() {
$('.product-name').click(function() {
$(this).find('i').toggleClass('plus minus');
});
});

.product {
margin-bottom: 10px;
overflow: hidden;
}

.product-block {
float: left;
width: 100%;
padding-bottom: 10px;
}

.product-title {
font-family: "Arial", Arial, sans-serif;
font-size: 1.8em;
background-color: #07457e;
color: #FFFFFF;
padding: 4px 4px 4px 10px;
border: solid 1px #07457e;
font-weight: 700;
}

.product-name {
font-family: "Arial", Arial, sans-serif;
font-size: 12pt;
color: #737373;
line-height: 30px;
padding: 0 5px;
overflow: hidden;
}

.product-title:hover {
background-color: silver !important;
cursor: pointer;
}

.product-name:hover {
background-color: silver !important;
cursor: pointer;
}

.product-section {
display: block;
/*height: 0px;*/
overflow: hidden;
}

.product-desc {
font-family: "Arial", Arial, sans-serif;
color: #737373;
height: 0px;
padding: 0 3px;
overflow: hidden;
display: block;
border-bottom: 2px solid #07457e;
}

.product-desc p {
font-family: "Arial", Arial, sans-serif;
font-size: 10pt;
text-align: justify;
margin: 0px;
margin-bottom: 2px;
padding: 0px;
}

.item-length {
width: 50px;
float: left;
overflow: hidden;
}

.item-length p {
font-weight: bold;
}

.device-length {
width: 25%;
float: left;
overflow: hidden;
}

.item-number {
width: auto;
float: left;
overflow: hidden;
}

.item-padding {
margin: 5px;
overflow: hidden;
}

.product-feature {
float: right;
width: auto;
}

.product-key {
padding: 0 5px;
}

.product-key p {
font-family: "Arial", Arial, sans-serif;
font-size: 9pt;
color: #07457e;
font-weight: bold;
line-height: 160%;
margin: 0px;
padding: 0px;
}

.plus-KO:before {
content: "+";
font-weight: bold;
color: #FFFFFF;
}

.minus-KO:before {
content: "\2013";
font-weight: bold;
color: #FFFFFF;
}

.plus:before {
content: "+";
font-weight: bold;
color: #07457e;
}

.minus:before {
content: "\2013";
font-weight: bold;
color: #07457e;
}

@media screen and (max-width: 767px) {
/* menu table visibility set by screen width */
.device-length {
width: 50%;
}
}

@media screen and (max-width: 499px) {
/* menu table visibility set by screen width */
.device-length {
width: 100%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="product">
<div class="product-block">
<div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div>
<div class="product-section">
<div class="product-key">
<p>Product subtitle</p>
</div>
<div class="product-name"><i class="plus"></i>&ensp;Product name</div>
<div class="product-desc">
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
</div>
<div class="product-name"><i class="plus"></i>&ensp;Product name</div>
<div class="product-desc">
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
</div>
<div class="product-name"><i class="plus"></i>&ensp;Product name</div>
<div class="product-desc">
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product-block">
<div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div>
<div class="product-section">
<div class="product-key">
<p>roduct subtitle</p>
</div>
<div class="product-name"><i class="plus"></i>&ensp;Product name</div>
<div class="product-desc">
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
</div>
<div class="product-name"><i class="plus"></i>&ensp;Product name</div>
<div class="product-desc">
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
</div>
<div class="product-name"><i class="plus"></i>&ensp;Product name</div>
<div class="product-desc">
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
<div class="device-length">
<div class="item-padding">
<div class="item-length">
<p>Size</p>
</div>
<div class="item-number">
<p>Item number</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Answer Source

try this at the beginning

$(document).ready(function(){ $('.product-section').css('height',0); });

$(document).ready(function(){
	$('.product-section').css('height',0);
});
$('.product-title').hover(function() {
    $(this).toggleClass('hover');
});
var lastItem;
    $('.product-title').click(function(currentItem) {
        var currentItem = $(this);
      if ($(this).next().height() == 0) {
          $(lastItem).css({'font-weight':'normal'});
          $(lastItem).next().animate({height: '0px'},400,'swing');
          $(this).css({'font-weight':'bold'});
          $(this).next().animate({height: '100%',opacity: 1},400,'swing');
      } else {
          $(this).next().animate({height: '0px',opacity: 1},400,'swing');
      }
      lastItem = $(this);
    });
$(function() {
    $('.product-title').click(function() {
        $(this).find('i').toggleClass('plus-KO minus-KO');
    });
});
$('.product-name').hover(function() {
    $(this).toggleClass('hover');
});
var lastItem;
    $('.product-name').click(function(currentItem) {
        var currentItem = $(this);
      if ($(this).next('.product-desc').height() == 0) {
          $(lastItem).css({'font-weight':'normal'});
          $(lastItem).next('.product-desc').animate({height: '0px'},400,'swing');
          $(this).next('.product-desc').animate({height: '100%',opacity: 1},400,'swing');
      } else {
          $(this).css({'font-weight':'normal'});
          $(this).next('.product-desc').animate({height: '0px',opacity: 1},400,'swing');
      }
      lastItem = $(this);
    });
$(function() {
    $('.product-name').click(function() {
        $(this).find('i').toggleClass('plus minus');
    });
});
.product {
  margin-bottom: 10px;
  overflow: hidden;
}

.product-block {
  float: left;
  width: 100%;
  padding-bottom: 10px;
}

.product-title {
  font-family: "Arial", Arial, sans-serif;
  font-size: 1.8em;
  background-color: #07457e;
  color: #FFFFFF;
  padding: 4px 4px 4px 10px;
  border: solid 1px #07457e;
  font-weight: 700;
}

.product-name {
  font-family: "Arial", Arial, sans-serif;
  font-size: 12pt;
  color: #737373;
  line-height: 30px;
  padding: 0 5px;
  overflow: hidden;
}

.product-title:hover {
  background-color: silver !important;
  cursor: pointer;
}

.product-name:hover {
  background-color: silver !important;
  cursor: pointer;
}

.product-section {
  display: block;
  /*height: 0px;*/
  overflow: hidden;
}

.product-desc {
  font-family: "Arial", Arial, sans-serif;
  color: #737373;
  height: 0px;
  padding: 0 3px;
  overflow: hidden;
  display: block;
  border-bottom: 2px solid #07457e;
}

.product-desc p {
  font-family: "Arial", Arial, sans-serif;
  font-size: 10pt;
  text-align: justify;
  margin: 0px;
  margin-bottom: 2px;
  padding: 0px;
}

.item-length {
  width: 50px;
  float: left;
  overflow: hidden;
}

.item-length p {
  font-weight: bold;
}

.device-length {
  width: 25%;
  float: left;
  overflow: hidden;
}

.item-number {
  width: auto;
  float: left;
  overflow: hidden;
}

.item-padding {
  margin: 5px;
  overflow: hidden;
}

.product-feature {
  float: right;
  width: auto;
}

.product-key {
  padding: 0 5px;
}

.product-key p {
  font-family: "Arial", Arial, sans-serif;
  font-size: 9pt;
  color: #07457e;
  font-weight: bold;
  line-height: 160%;
  margin: 0px;
  padding: 0px;
}

.plus-KO:before {
  content: "+";
  font-weight: bold;
  color: #FFFFFF;
}

.minus-KO:before {
  content: "\2013";
  font-weight: bold;
  color: #FFFFFF;
}

.plus:before {
  content: "+";
  font-weight: bold;
  color: #07457e;
}

.minus:before {
  content: "\2013";
  font-weight: bold;
  color: #07457e;
}

@media screen and (max-width: 767px) {
  /* menu table visibility set by screen width */
  .device-length {
    width: 50%;
  }
}

@media screen and (max-width: 499px) {
  /* menu table visibility set by screen width */
  .device-length {
    width: 100%;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="product">
  <div class="product-block">
    <div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div>
    <div class="product-section">
      <div class="product-key">
        <p>Product subtitle</p>
      </div>
      <div class="product-name"><i class="plus"></i>&ensp;Product name</div>
      <div class="product-desc">
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
      </div>
      <div class="product-name"><i class="plus"></i>&ensp;Product name</div>
      <div class="product-desc">
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
      </div>
      <div class="product-name"><i class="plus"></i>&ensp;Product name</div>
      <div class="product-desc">
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="product">
  <div class="product-block">
    <div class="product-title"><i class="plus-KO"></i>&ensp;Product title</div>
    <div class="product-section">
      <div class="product-key">
        <p>roduct subtitle</p>
      </div>
      <div class="product-name"><i class="plus"></i>&ensp;Product name</div>
      <div class="product-desc">
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
      </div>
      <div class="product-name"><i class="plus"></i>&ensp;Product name</div>
      <div class="product-desc">
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
      </div>
      <div class="product-name"><i class="plus"></i>&ensp;Product name</div>
      <div class="product-desc">
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
        <div class="device-length">
          <div class="item-padding">
            <div class="item-length">
              <p>Size</p>
            </div>
            <div class="item-number">
              <p>Item number</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download