"Frequently Asked Questions acoordian"
Bootstrap 3.3.0 Snippet by gango

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="body"> <br> <div class="content"> <div> <input type="checkbox" id="question1" name="q" class="questions"> <div class="plus">+</div> <label for="question1" class="question"> Odeme ve kargo islemlerinde neler yapmam gerekiyor? </label> <div class="answers"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus dolor vel </div> </div> <div> <input type="checkbox" id="question2" name="q" class="questions"> <div class="plus">+</div> <label for="question2" class="question"> Do I need to be a veteran to join? </label> <div class="answers"> You do not, in fact we encourage all members of the Rutgers community to join in our meetings. </div> </div> <div> <input type="checkbox" id="question3" name="q" class="questions"> <div class="plus">+</div> <label for="question3" class="question"> When are the meetings? </label> <div class="answers"> We meet once a month on the first Wednesday of the month, 8 PM at the Veterans House on College Avenue Campus. </div> </div> <div> <input type="checkbox" id="question4" name="q" class="questions"> <div class="plus">+</div> <label for="question4" class="question"> How do I get in touch with the organization? </label> <div class="answers"> The best way to contact us is by e-mailing us, there is a link to e-mail us at the bottom of the page or you can visit the "Contact Us" page. </div> </div> </div> </div> <!-- end of body !-->
/* import the fonts needed */ @import url("http://fonts.googleapis.com/css?family=Cookie"); @import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* header settings */ .header > input { display: none; } .header > label { display: none; width: 3em; height: 3em; margin-left: 1em; margin-top: .5em; background-size: contain; background-repeat: no-repeat; } .header { width: 100%; height: 4em; background-color: #0C1323; opacity: 0.9; background-repeat: no-repeat; background-position: right; background-size: auto 4em; position: fixed; top: 0px; z-index: 1000; } .header > .navbar { width: auto; } .header > .navbar > li { display: inline-block; width: auto; height: auto; font-size: 130%; padding: 10px 12px 5px 12px; text-align: center; } .header > .navbar > li > a { color: white; text-decoration: none; font-family: Trebuchet MS, Charcoal, sans-serif; } .header > .navbar > li > a:hover { color: #C21814; } /* end header settings */ /* body settings */ .question:hover { color: #e5e5e5; } .content { width: 80%; padding: 20px; margin: 0 auto; padding: 0 60px 0 0; } .centerplease { margin: 0 auto; width: 100vw; font-size: 150%; text-align: center; margin-top: 3em; padding: 5px; } .question { position: relative; background: #428bca; margin: 0; padding: 10px 10px 10px 50px; display: block; width:100%; cursor: pointer; color: white; } .answers { background: #eee; padding: 0px 15px; margin: 5px 0; height: 0; overflow: hidden; z-index: 15; position: relative; opacity: 0; -webkit-transition: .7s ease; -moz-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease; } .questions:checked ~ .answers{ height: auto; opacity: 1; padding: 15px; } .plus { position: absolute; color: white; margin-left: 10px; z-index: 15; font-size: 2em; line-height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .questions:checked ~ .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .questions { display: none; } /* end of body settings */ /* footer settings */ .footer { display: block; width: 100%; color: #242B39; text-align: center; position: fixed; bottom: 0px; background-color: white; padding: 5px; z-index: 10; opacity: .9; } .footer > .contact { padding: 0px 0px 5px 0px; } .footer > .contact > li > a { text-decoration: none; color: #242B39; } .footer > .contact > li > a:hover { text-decoration: underline; text-transform: uppercase; color: #C21814; } .footer > .contact > li { display: inline; padding: 0px 8px 0px 8px; border-right: 1px solid #242B39; } .footer > .contact > li:last-child{ border-right: 0; } /* end of footer settings */ /* <= 600px settings*/ @media (max-width: 600px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 220px; height: 110vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 120vh; font-size: 90%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } } /* 601-759px settings */ @media all and (min-width:601px) and (max-width:749px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 200px; height: 130vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 100vh; font-size: 100%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } } /* 750-799px settings */ @media all and (min-width:750px) and (max-width:799px) { .body { height: 100vh; font-size: 100%; } } /* 800-1300px settings*/ @media all and (min-width:800px) and (max-width:1300px) { .body { height: 100vh; font-size: 100%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } }

Related: See More


Questions / Comments: