CODEWITHSUNDEEP
jqueryhtmlcss
mkendre
mkendre

Reputation: 15

Need help for section with collapsible content

I have been using stackoverflow for a quite of time and today i got chance to ask my doubt here. Hope it ill be get resolved soon.

So basically i was trying to achieve functionality used for FAQ section on this site: http://yourquestions.mcdonalds.ca/faq

I have tried to replicate the design by using .hide & .slideToggle functions in jquery and little bit of css, but i am facing issue with content flow.When i click 1st header it operates properly but not for 2nd header (there is white space on left when i click 2nd header).

My code(Js fiddle): https://jsfiddle.net/o2e7d20h/

Additionally how can i add +/- (or collapse/expand) to every header in my code and toggle it (seeking help coz i am not good with jquery).

jQuery(document).ready(function() {
  jQuery(".content").hide();
  jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(500);
  });
});
.layer1 {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}

.heading {
  color: #fff;
  cursor: pointer;
  position: relative;
  margin: 2%;
  padding-bottom: 2em;
  padding-top: 2em;
}

.content {
  margin: 2%;
  position: relative;
  background-color: #fff;
  position: relative;
  color: #000 !important;
}

#boxes {
  margin: 0;
  padding: 0;
  width: 50%;
  max-width: 50%;
  height: auto;
  float: left;
  text-align: center;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer1">

  <div id="boxes">
    <p class="heading" style="background-color:#D1422F; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#E38D82; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#32B36B; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#85D3A6; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#25969D; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#7cc0c4; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#813B73; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b389ab; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#66afd3; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#7C1B3B;color:#fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b07689; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#D1422F; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#E38D82; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#32B36B; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#85D3A6; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#25969D; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#7cc0c4; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#813B73; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b389ab; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#66afd3; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

  <div id="boxes">
    <p class="heading" style="background-color:#7C1B3B;color:#fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <div class="content" style="background-color:#b07689; text-align:justify;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
        quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
        eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
        nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
        mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
        eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
        ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
        Vivamus non fermentum augue.</div>
  </div>

</div>

Thanks for any help with this...

Upvotes: 1

Views: 49

Answers (1)

Yass
Yass

Reputation: 2668

First of all, you're using an id of "boxes" for multiple elements. You need to ensure that all id's are unique. There also doesn't seem to be a proper separation of the boxes.

I've updated your fiddle to use divs with a class of box-section to separate the two groups.

Updated Fiddle

In summary, your Html now looks like the following:

<div class="box-section">
  6 boxes
</div>

<div class="box-section">
  6 boxes
</div>

Upvotes: 1

Related Questions