Create a Responsive Accordion Menu for SmugMug

Here is how you can create an Accordion Menu/List for your SmugMug website using only one HTML/CSS Block, no Javascript needed. I added a sub-menu on Accordion 3 (.accordion-sub), but you can easily remove it by removing the code wrapping with:  and either remove .sub input:checked ~ .accordion-content {padding: 15px 20px;} or set the padding to 0.

If you still have questions, feel free to post your question on the Dgrin SmugMug Customization Forum and myself of another helper can help you.

Accordion One

Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!

Accordion Two

Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!

Accordion Three

Sub One

Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?

Sub Two

Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?

Accordion Four

Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!

HTML


<div class="accordion-wrapper">

  <!-- Accordion One -->
  <div class="accordion">
    <input type="radio" name="tab" id="tab-1" checked>
    <label for="tab-1">
      <span>Accordion One</span>
      <div class="icon"><i class="sm-fonticon-xlarge sm-fonticon-Add"></i></div>
    </label>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
    </div>
  </div>

  <!-- Accordion Two -->
  <div class="accordion">
    <input type="radio" name="tab" id="tab-2">
    <label for="tab-2">
      <span>Accordion Two</span>
      <div class="icon"><i class="sm-fonticon-xlarge sm-fonticon-Add"></i></div>
    </label>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
    </div>
  </div>

  <!-- Accordion Three -->
  <div class="accordion sub">
    <input type="radio" name="tab" id="tab-3">
    <label for="tab-3" class="sub">
      <span>Accordion Three</span>
      <div class="icon"><i class="sm-fonticon-xlarge sm-fonticon-Add"></i></div>
    </label>
    <div class="accordion-content">

      <!-- Accordion Sub Start -->
      <div class="accordion-sub">
        <input type="checkbox" name="sub-tab" id="tab-4">
        <label for="tab-4">
          <span>Sub One</span>
          <div class="icon"><i class="sm-fonticon-xlarge sm-fonticon-Add"></i></div>
        </label>
        <div class="accordion-content-sub">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
        </div>
      </div>
      <!-- Accordion Sub End -->

      <!-- Accordion Sub Start -->
      <div class="accordion-sub">
        <input type="checkbox" name="sub-tab" id="tab-5">
        <label for="tab-5">
          <span>Sub Two</span>
          <div class="icon"><i class="sm-fonticon-xlarge sm-fonticon-Add"></i></div>
        </label>
        <div class="accordion-content-sub">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
        </div>
      </div>
      <!-- Accordion Sub End -->

    </div>
  </div>

  <!-- Accordion Four -->
  <div class="accordion">
    <input type="radio" name="tab" id="tab-6">
    <label for="tab-6">
      <span>Accordion Four</span>
      <div class="icon"><i class="sm-fonticon-xlarge sm-fonticon-Add"></i></div>
    </label>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
    </div>
  </div>

</div>

CSS


/**
* Creates A Responsive Accordion Menu
************************************************/
* {box-sizing: border-box;}

::selection {background: rgb( 0, 123, 255, 0.3 );}

input[type="radio"],
input[type="checkbox"] {display: none;}

.sm-fonticon-xlarge {
  font-family: 'SmugMug Icon Font XLarge';
  font-style: normal;
}

.accordion-wrapper {padding: 0 20px;}

.accordion-wrapper .accordion,
.accordion-wrapper .accordion-sub {
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0px 0px 15px rgba( 0, 0, 0, 0.18 );
}

.accordion-wrapper .accordion label,
.accordion-wrapper .accordion-sub label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  z-index: 5;
  transition: all 0.3s ease;
  padding: 10px 20px;
  background: #844a50;
}

.accordion input:checked ~ label,
.accordion-sub input:checked ~ label,
.accordion-wrapper .accordion label:hover {background: #a06871;}

.accordion input:checked ~ label,
.accordion-sub input:checked ~ label {border-radius: 3px 3px 0 0;}

.accordion-wrapper label span {
  font-size: 18px;
  color: #fff;
}

.accordion-wrapper .accordion-sub label span {font-size: 17px;}

.accordion label .icon {
  position: relative;
  height: 30px;
  width: 30px;
  color: #844a50;
  display: block;
  border-radius: 50%;
  background: #fff;
}

.accordion-wrapper .accordion-sub label .icon {
  height: 27px;
  width: 27px;
}

.accordion label .icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.accordion input:checked ~ label .icon i:before,
.accordion-sub input:checked ~ label .icon i:before {content: '\E505';}

.accordion-wrapper .accordion .accordion-content,
.accordion-wrapper .accordion-sub .accordion-content-sub {
  max-height: 0px;
  overflow: hidden;
  border-radius: 0 0 3px 3px;
  transition: all 0.4s ease;
  background: #fff;
}

.accordion input:checked ~ .accordion-content,
.accordion-sub input:checked ~ .accordion-content-sub {max-height: 100vh;}

.sub input:checked ~ .accordion-content {padding: 15px 20px;}

.accordion .accordion-content p,
.accordion-sub .accordion-content-sub p {
  padding: 15px 20px;
  font-size: 16px;
}

.accordion-sub .accordion-content-sub p {font-size: 15px;}
/* Creates A Responsive Accordion Menu End */