html - Pure CSS accordion not working within CSS tabs -


i have pure css accordion using checkbox input+label trick. source code can found here:

accordion: https://codepen.io/raubaca/pen/pzzpve
tabs: https://css-tricks.com/css3-tabs/

accordion works outside of tabs. challenge making accordion work within tabs, not expanding , contracting. adjusted position, z-index, height, etc.. have had no success.

how can make accordion work inside tabs?

https://jsfiddle.net/lance_bitner/z5odxw88/ 

.tab > input:checked ~ .tab-content {  max-height: 100%;  }  .tab > label::after {  position: absolute;  left: -20px;  top: -9px;  display: block;  width: 3em;  height: 3em;  line-height: 3em;  text-align: center;  -webkit-transition: .35s;  -o-transition: .35s;  transition: .35s;  }  .tab > input[type=checkbox] + label::after {  content: " + ";  font-size: 18px;  font-weight: 900;  }  .tab > input[type=radio] + label::after {  content: " \25bc ";  }  .tab > input[type=checkbox]:checked + label::after {  transform: rotate(315deg);  }  .tab > input[type=radio]:checked + label::after {  transform: rotatex(180deg);  }

the main issue z-index: -1 set in .w3c > div:target > div rule. change 1 , move target top.

a second issue set bottom: 0 in .w3c > div > div rule. prevent size content. removed , added min-height: 100%;

updated fiddle

stack snippet

/* acordeon styles */    .tab1 {    position: relative;    margin-bottom: 1px;    width: 100%;    color: #0072c6;    overflow: hidden;  }    .tab1 p {    color: black;  }    .tab > input {    position: absolute;    opacity: 0;  }    .tab > label {    position: relative;    display: block;    padding: 0 0 0 1em;    /*background-color:aliceblue;    font-weight: bold;*/    line-height: 3;    cursor: pointer;  }    .blue label {    background: #2980b9;  }    .tab-content {    max-height: 0;    overflow: hidden;    background: white;    -webkit-transition: max-height .35s;    -o-transition: max-height .35s;    transition: max-height .35s;  }    .blue .tab-content {    background: #3498db;  }    .tab-content p {    margin: 1em;  }    .tab > input:checked ~ .tab-content {    max-height: 100%;  }    .tab > label::after {    position: absolute;    left: -20px;    top: -9px;    display: block;    width: 3em;    height: 3em;    line-height: 3em;    text-align: center;    -webkit-transition: .35s;    -o-transition: .35s;    transition: .35s;  }    .tab > input[type=checkbox] + label::after {    content: " + ";    font-size: 18px;    font-weight: 900;  }    .tab > input[type=radio] + label::after {    content: " \25bc ";  }    .tab > input[type=checkbox]:checked + label::after {    transform: rotate(315deg);  }    .tab > input[type=radio]:checked + label::after {    transform: rotatex(180deg);  }    .row {    background-color: white;  }    .ms-srch-sb {    min-width: 150px !important;  }    .page-wrap {    width: 80%;    margin: 0 auto;  }    input[type="radio"] {    position: absolute;    top: -9999px;    left: -9999px;  }    .tab-wrap {    width: 100%;    float: none;    list-style: none;    position: relative;    margin: 0 auto;    padding: 0;    text-align: left;  }    .tab-wrap li {    float: left;    display: block;  }    .tab-wrap label {    position: relative;    display: inline-block;    padding: 1.5em 1.5em 1em;    color: inherit;    text-decoration: none;    margin: 0 10px 0 0px;  }  /*  .label-1 {    z-index: 100;  }    .label-2 {    z-index: 90;  }    .label-3 {    z-index: 80;  }  */  .tab-wrap label:before {    content: '';    position: absolute;    top: 0;    right: 0;    bottom: 10px;    left: 0;    /*z-index: -1;*/    border: .1em solid #aaa;    border-bottom: none;    border-radius: 10px 10px 0 0;    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1)));    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);    -webkit-transform: perspective(5px) rotatex(2deg);    transform: perspective(5px) rotatex(2deg);    -webkit-transform-origin: left;    -ms-transform-origin: left;    transform-origin: left;  }    .tab-wrap .tab-content {    /*z-index: 200;*/    display: none;    overflow: hidden;    width: 100%;    position: absolute;    top: 53px;    left: 0;    padding: 20px;    background: #fff;    border-radius: 3px;    border: .1em solid #aaa;    border-top: 0;  }    .tab-wrap [id^="tab"]:checked + label {    /*z-index: 200;*/    margin-bottom: -1px;    border-top-width: 1px;  }    .tab-wrap [id^="tab"]:checked + label:before {    background: #fff;  }    .tab-wrap [id^="tab"]:checked ~ .tab-content {    display: block;  }      /* stuff example 6 */    .w3c {    min-height: 150px;    position: relative;    width: 100%;  }    .w3c > div {    display: inline;  }    .w3c > div > {    margin-left: -1px;    position: relative;    left: 1px;    text-decoration: none;    color: black;    background: white;    display: block;    float: left;    padding: 5px 10px;    border: 1px solid #ccc;    border-bottom: 1px solid white;  }    .w3c > div:not(:target) > {    border-bottom: 0;    background: -moz-linear-gradient(top, white, #eee);  }    .w3c > div:target > {    background: white;  }    .w3c > div > div {    background: white;    /*z-index: -2;*/    left: 0;    top: 30px;    /*bottom: 0;*/    min-height: 100%;        /*  added grows content  */    right: 0;    padding: 20px;    border: 1px solid #ccc;  }    .w3c > div:not(:target) > div {    position: absolute;  }    .w3c > div:target > div {    position: absolute;    z-index: 1;  }
<div class="w3c">    <div id="tab16">      <a href="#tab16">tab 16</a>      <div>            <div class="tab">          <input id="tab-one" type="checkbox" name="tabs">          <label for="tab-one">introduction sharepoint</label>          <div class="tab-content">            <div>              <div class="column2">                <a href=""><img src="../images/classroom1.png"></a>                <a href=""><img src="../images/document1.png"></a>                <a href=""><img src="../images/presentation1.png"></a>                <a href=""><img src="../images/video1.png"></a>              </div>            </div>          </div>        </div>        <div class="tab">          <input id="tab-two" type="checkbox" name="tabs">          <label for="tab-two">label two</label>          <div class="tab-content">            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? saepe, itaque.</p>          </div>        </div>        <div class="tab">          <input id="tab-three" type="checkbox" name="tabs">          <label for="tab-three">label three</label>          <div class="tab-content">            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? saepe, itaque.</p>          </div>        </div>      </div>    </div>    <div id="tab17">      <a href="#tab17">tab 17</a>      <div>... 30 lines of css rather lot, and...</div>    </div>    <div id="tab18">      <a href="#tab18">tab 18</a>      <div>... 2 should have been enough, but...</div>    </div>  </div>

some notes:

  • a <p> isn't allowed have div child, changed <div>

  • there lot of z-index set , commented out of them last, , recommend use them when necessary


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more