CODEWITHSUNDEEP
cssflexbox
ProllyGeek
ProllyGeek

Reputation: 15836

css flexbox responsive accordion

I need to build a responsive accordion using pure css solution , the scenario is illustrated in images , the only different thing from default accordions , it that user can keep both tabs open ,and they should split screen into 2 halves.

Div#2 is expanded - Div#1 is shrinked

Div#1 is expanded - Div#2 is shrinked

Both Divs are expanded

can this be achieved using pure flex solution such that when any div content is hidden , the div should shrink automatically ?

Upvotes: 2

Views: 3579

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Codepen: http://codepen.io/anon/pen/LVmNwQ

This example relies on two hidden checkbox to show and close the accordion, so it can work using only CSS. Shrink and expand labels depend on the checkbox :checked status

HTML

<section>

    <input type="checkbox" id="dcb1" />
    <h2><label for="dcb1">Div #1 Control bar</label></h2>
    <div>Text of div #1</div>


    <input type="checkbox" id="dcb2" />
    <h2><label for="dcb2">Div #2 Control bar</label></h2>
    <div>Text of div #2</div>

</section>

CSS

* {  
  box-sizing: border-box;  
}

section {
   height: 100vh;
   display: flex;
   flex-direction: column; 
}

input[type="checkbox"] {
   position: absolute;
   z-index: -1;
}

h2 {
   margin     : 0;
   padding    : 10px 20px;
   width      : 100%;
   height     : auto;
   overflow   : hidden;
   color      : #fff;
   background : #0085b2;
   cursor     : pointer;
}

div {
   background: #25c8ff;
   height: 0;
   overflow: hidden;
}

input:checked + h2 + div {
   height: auto;
   padding: 20px;
   flex-grow : 1;
}

label:after {
   float: right;
}

input + h2 label:after         { content: "expand" }
input:checked + h2 label:after { content: "shrink" }

Upvotes: 2

Related Questions