0

I am working on one of my projects and I am trying to build a user-friendly responsive static web page. For current page, I am using only CSS for expanding/collapsing data when labels are clicked. It doesn't seem to be working and I know I have done some really small mistake, but can't find it. Any help will be appriciated.

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{line-height:1}body{line-height:inherit}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* stylelint-enable */

section {
  position: relative;
}
.main-content > ol {
  display: flex;
  justify-content: space-between;
}

.main-content > ol > li {
    flex: 0 1 45%;
    padding: 0;
}

input[type=checkbox] {
   width: 100%;
   height: 100%;
   opacity: 0;
}


label {
  cursor: pointer;
  position: relative;
  display: block;
  padding-left: 30px;
}



label:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: 10px;
  border-left: 8px solid black;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-top: -2px;
}


input[type=checkbox]:checked ~ h3 label:before {
  border-left: 8px solid transparent;
  border-top: 8px solid black;
  border-right: 8px solid transparent;
  margin-left: -4px;
  margin-top: -4px;
}


li {
  max-height: 0;
  display: none;
  padding-left: 30px;
  transition: max-height 0.4s ease;
}

input[type=checkbox]:checked ~ h3 ~ li {
  max-height: 200px;
} 
 <main id="content">
    <article class="content">
      <h1>My Account</h1>
      <section class="main-content">
          <input type="checkbox" id="term-balance">
          <h3><label for="term-balance">Current Term Balance</label></h3>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Current Term Balance</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$0.00</li>
              <li id="button-to-submit">
                <input type="submit" name="submit" id="submit" value="Make a Payment" />
              </li>
            </ol>
          </li>
        </ol>
      </section>

      <section class="main-content">
          <input type="checkbox" id="term-activity">
          <h3><label for="term-activity">Current Term Account Activity</label></h3>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">TPBC Electronic Check Payment</li>
              <li class="subprimary-content">03-MAR-2017</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$4,217.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">UG Direct Unsub Loan</li>
              <li class="subprimary-content">03-MAR-2017</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$999.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Federal Pell Grant</li>
              <li class="subprimary-content">09-JAN-2017</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$2,342.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Stem Scholarship</li>
              <li class="subprimary-content">09-JAN-2017</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$3,000.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Transfer Scholarship</li>
              <li class="subprimary-content">09-JAN-2017</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$8,000.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Graduaton Application Fee</li>
              <li class="subprimary-content">08-JAN-2017</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$331.00</li>
            </ol>
          </li>
        </ol>
      </section>
      <section class="main-content">
          <input type="checkbox" id="total-loans">
          <h3><label for="total-loans">Total Accepted Loans</label></h3>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Spring 2017</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">UD Direct Sub Loan</li>
              <li class="subprimary-content">UD Direct Unsub Loan</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$2,721.00</li>
              <li class="money-content">$1,000.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Fall 2016</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">UD Direct Sub Loan</li>
              <li class="subprimary-content">UD Direct Unsub Loan</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$2,721.00</li>
              <li class="money-content">$1,000.00</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">Spring 2016</li>
            </ol>
          </li>
        </ol>
        <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">UD Direct Sub Loan</li>
              <li class="subprimary-content">UD Direct Unsub Loan</li>
              <li class="subprimary-content">Direct Parent Loan</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">$2,721.00</li>
              <li class="money-content">$1,000.00</li>
              <li class="money-content">$6,214.00</li>
            </ol>
          </li>
        </ol>
         <ol>
          <li class="content-title">
            <ol class="title-content">
              <li class="subprimary-content">--------------------------------</li>
              <li class="subprimary-content">Total Accepted Loans</li>
            </ol>
          </li>
          <li class="content-title">
            <ol class="title-content">
              <li class="money-content">--------------</li>
              <li class="money-content">$17,377.00</li>
            </ol>
          </li>
        </ol>
      </section>
Chirag
  • 994
  • 2
  • 11
  • 26
Dipen
  • 27
  • 5
  • For expanding submenu's of parent menu you'll need jquery or javascript I think. – Chirag Apr 15 '17 at 05:50
  • It is possible to do it without Jquery or JavsScript and that is my actual task to get it working without any JavaScript or Jquery – Dipen Apr 15 '17 at 05:52
  • try reading this: http://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css/32721572#32721572 – Rio Apr 15 '17 at 05:57
  • Try reffering [This CodePen](http://codepen.io/anchen/pen/rGDjI) – Chirag Apr 15 '17 at 06:00
  • @Chirag Doing this without JavaScript is certainly possible, and the use of `checkbox` is a suitable way to do it. – Manngo Apr 15 '17 at 06:11

2 Answers2

0

You appear to have 2 issues which prevent your code from working:

  • You hide your element with display: none but forget to show it again later.
  • The nature of your structure suggests that you might benefit from applying the CSS to the ol instead of the li.

Here is a suggested fix which works in my testing:

input[type=checkbox]~h3~ol {
    max-height: 0;
    display: none;
    padding-left: 30px;
    transition: max-height 0.4s ease;
    overflow: hidden;
}

input[type=checkbox]:checked~h3~ol {
    display: block;
    max-height: 400px;
}

BTW I would suggest you use ul instead of ol: there is nothing intrinsically ordered about your data, and you suppress numbers anyway.

Also, your use of the checkbox is a good idea, but you will find that it doesn’t work on Legacy Browsers™. Personally that doesn’t bother me, but some of the poor souls suffering in IE land will not see it work. Fortunately, that’s not very many.

Manngo
  • 14,066
  • 10
  • 88
  • 110
0

You have to add below CSS, It will work for you.

input[type=checkbox]:checked ~ h3 ~ ol li 
{
display: block;
}
Sunil Singh Rawat
  • 96
  • 4