Last active
September 2, 2015 12:55
-
-
Save johndhancock/d68e0858f8e5355c6623 to your computer and use it in GitHub Desktop.
Dropdown panels
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
| .dropList .dropHed { | |
| cursor: pointer; | |
| } | |
| .dropList .dropItem { | |
| background-color: rgb(240,240,240); | |
| border-radius: 2px; | |
| margin-bottom: .6rem; | |
| padding: 1rem; | |
| } | |
| .dropList .dropHed span.cardinal { | |
| background-color: #A8A8A8; | |
| border-radius: 50%; | |
| color: white; | |
| float: left; | |
| font-size: 1.8rem; | |
| height: 2.4rem; | |
| letter-spacing: -1px; | |
| line-height: 2.2rem; | |
| margin-right: 1rem; | |
| text-align: center; | |
| text-indent: -1px; | |
| width: 2.4rem; | |
| } | |
| .dropList .dropHed h5 { | |
| float: left; | |
| margin-bottom: 0; | |
| width: calc(100% - 7rem); | |
| } | |
| .dropList .dropHed .fa{ | |
| color: #5CA3E6; | |
| float: right; | |
| font-size: 2rem; | |
| line-height: 2.4rem; | |
| margin:0 1rem; | |
| } | |
| .dropList .dropText { | |
| display: none; | |
| padding: 1rem 4rem 1rem 0rem; | |
| } | |
| .dropList .dropText img { | |
| width: 100%; | |
| margin-bottom: 1.2rem; | |
| } | |
| .dropList .expandedText { | |
| display: block; | |
| } | |
| .dropList p.dropText { | |
| font-family: 'Open Sans', Arial, sans-serif; | |
| font-size: 1.4rem; | |
| line-height: 1.8rem; | |
| } |
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
| var $dropHead = $('.dropList .dropHed'); | |
| $dropHead.on('click', function(){ | |
| $(this).next(".dropText").slideToggle(200); | |
| $(this).find(".fa").toggleClass('fa-plus').toggleClass('fa-minus'); | |
| }); |
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
| <aside class="dropList inlineBlock"> | |
| <h4>SWC, then and now:</h4> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-minus"></i> | |
| </div> | |
| <div class="dropText expandedText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| <div class="dropItem"> | |
| <div class="dropHed clearFix"> | |
| <h5>Team</h5><i class="fa fa-plus"></i> | |
| </div> | |
| <div class="dropText"> | |
| <p>Your image, numbers, synopsis, etc will go in this dropText div. Style how ever you see fit</p> | |
| </div> | |
| </div> | |
| </aside> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment