A Pen by Sorin Ruse on CodePen.
Created
October 15, 2020 12:11
-
-
Save neisdev/feaf68c32314815f7984a6becd292432 to your computer and use it in GitHub Desktop.
Tailwindcss accordion
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="accordion flex flex-col items-center justify-center h-screen"> | |
| <!-- Panel 1 --> | |
| <div class="w-1/2"> | |
| <input type="checkbox" name="panel" id="panel-1" class="hidden"> | |
| <label for="panel-1" class="relative block bg-black text-white p-4 shadow border-b border-grey">Panel 1</label> | |
| <div class="accordion__content overflow-hidden bg-grey-lighter"> | |
| <h2 class="accordion__header pt-4 pl-4">Header</h2> | |
| <p class="accordion__body p-4" id="panel1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur | |
| adipisicing elit. Lorem ipsum dolor sit amet.</p> | |
| </div> | |
| </div> | |
| <!-- Panel 2 --> | |
| <div class="w-1/2"> | |
| <input type="checkbox" name="panel" id="panel-2" class="hidden"> | |
| <label for="panel-2" class="relative block bg-black text-white p-4 shadow border-b border-grey">Panel 2</label> | |
| <div class="accordion__content overflow-hidden bg-grey-lighter"> | |
| <h2 class="accordion__header pt-4 pl-4">Header</h2> | |
| <p class="accordion__body p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur | |
| adipisicing elit. Lorem ipsum dolor sit amet.</p> | |
| </div> | |
| </div> | |
| <!-- Panel 3 --> | |
| <div class="w-1/2"> | |
| <input type="checkbox" name="panel" id="panel-3" class="hidden"> | |
| <label for="panel-3" class="relative block bg-black text-white p-4 shadow border-b border-grey">Panel 3</label> | |
| <div class="accordion__content overflow-hidden bg-grey-lighter"> | |
| <h2 class="accordion__header pt-4 pl-4">Header</h2> | |
| <p class="accordion__body p-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto possimus at a cum saepe molestias modi illo facere ducimus voluptatibus praesentium deleniti fugiat ab error quia sit perspiciatis velit necessitatibus.Lorem ipsum dolor sit amet, consectetur | |
| adipisicing elit. Lorem ipsum dolor sit amet.</p> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // function copy(obj) { | |
| // try { | |
| // if (obj) selectContent(obj) | |
| // document.execCommand('copy') | |
| // // clears the current selection | |
| // window.getSelection().removeAllRanges() | |
| // } catch (err) { | |
| // console.log(err) | |
| // } | |
| // }; | |
| // function selectContent(obj) { | |
| // if (window.getSelection && document.createRange) { | |
| // let sel = window.getSelection() | |
| // let range = document.createRange() | |
| // range.selectNodeContents(obj) | |
| // sel.removeAllRanges() | |
| // sel.addRange(range) | |
| // } else if (document.selection && document.body.createTextRange) { | |
| // let textRange = document.body.createTextRange() | |
| // textRange.moveToElementText(obj) | |
| // textRange.select() | |
| // } | |
| // }; | |
| // $('#panel1').mouseover(function(){ | |
| // selectContent(this); | |
| // }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| label:after { | |
| content: '+'; | |
| position: absolute; | |
| right: 1em; | |
| color: #fff; | |
| } | |
| input:checked + label:after { | |
| content: '-'; | |
| line-height: .8em; | |
| } | |
| .accordion__content{ | |
| max-height: 0em; | |
| transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87); | |
| } | |
| input[name='panel']:checked ~ .accordion__content { | |
| /* Get this as close to what height you expect */ | |
| max-height: 50em; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment