2 Column Layout

2 Column Layout

by pmamode

HTML

<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<div class="wrapper">
  <h1>Responsive Layout Example</h1>
  <header>HEADER</header>
  <nav class="column">
    <div id="accordion">
      <div id="accordian-show-hide" class="show-hide">Show All</div>
      <hr>
      <div class="accordion-toggle right-arrow">Accordion 1</div>
      <div class="accordion-content default">
        <div>Cras malesuada ultrices augue molestie risus.</div>
      </div>
      <hr>
      <div class="accordion-toggle right-arrow">Accordion 2</div>
      <div class="accordion-content">
        <div>Lorem ipsum dolor sit amet mauris eu turpis.</div>
      </div>
      <hr>
      <div class="accordion-toggle right-arrow">Accordion 3</div>
      <div class="accordion-content">
        <div>Vivamus facilisisnibh scelerisque laoreet.</div>
      </div>
      <hr>
    </div>
  </nav>
  <section class="column">SECTION</section>
  <footer>FOOTER</footer>
</div>

CSS

/**************************************
RESPONSIVE LAYOUT CSS
**************************************/

.wrapper {
  max-width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 800px) {
  .wrapper {
    max-width: 90%;
  }
  header {
    width: 100%;
  }
  nav,
  section {
    float: left;
  }
  footer {
    clear: both;
  }
  nav {
    width: 20.83333%;
    margin-right: 1.041667%;
  }
  section {
    width: 78.125%;
  }
}

@media screen and (min-width: 1000px) {
  .wrapper {
    max-width: 66.66667%;
  }
}


/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/




*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2980b9;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  margin: 0;
}

header,
nav,
section,
footer {
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

header {
  padding: 20px 0;
}

section,
nav {
  padding: 2px 0;
}

nav {
  height: 400px;
  font-size: .75em;
}

/**************************************
ACCORDIAN CSS
**************************************/

.accordion-toggle {
  cursor: pointer;
}

.accordion-content {
  display: none;
}

.right-arrow:before {
  content: '\25ba';
  font-size: small
}

.down-arrow:before {
  content: '\25bc';
  font-size: small
}

.show-hide {
  cursor: pointer;
}

JavaScript

function equalHeight(group) {
  var tallest = 0;
  group.each(function() {
    var thisHeight = $(this).height();
    if (thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

$(document).ready(function() {
  equalHeight($(".column"));
  //equalHeight($("section"));


  $('#accordion').find(".show-hide").click(function() {
    $(".show-hide").text() == "Show All" ?
      ($(".show-hide").text("Hide All"), $(".accordion-toggle").removeClass("right-arrow").addClass("down-arrow"), $(".accordion-content").hide()) :
      ($(".show-hide").text("Show All"), $(".accordion-toggle").removeClass("down-arrow").addClass("right-arrow"), $(".accordion-content").show());

    $(".accordion-content").toggle();

  });

  $('#accordion').find('.accordion-toggle').click(function() {
    //Expand or collapse this panel
    $(this).toggleClass("right-arrow down-arrow");
    $(this).next().toggle();

    if ($('#accordion').find('.accordion-content').is(':visible')) {
      $(".show-hide").text("Hide All");
    } else {
      $(".show-hide").text("Show All");
    }

    //$("#output").html("test");
    //Hide the other panels
    //$(".accordion-content").not($(this).next()).slideUp('fast');
  });



});