jcadima
9/22/2016 - 9:14 PM

FAQ accordion jquery

FAQ accordion jquery

new_gist_file.html
content_copyfile_download
http://www.jqueryscript.net/accordion/Simple-Smooth-FAQ-Accordion-with-jQuery-CSS-FAQ-Slider.html

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/script.js"></script>
  <title>jQuery FAQ Slider Demo</title>
</head>
  <body>
  <div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/accordion/Simple-Smooth-FAQ-Accordion-with-jQuery-CSS-FAQ-Slider.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
    <div id="container">
      <h1>jQuery FAQ Slider Demo</h1>
      <div class="title"><h3>FAQ Slider Using jQuery</h3></div>
      <ul class="faq">
        <li class="q"><img src="img/arrow.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit?</li>
        <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
        
        <li class="q"><img src="img/arrow.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit?</li>
        <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
        
        <li class="q"><img src="img/arrow.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit?</li>
        <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
        
        <li class="q"><img src="img/arrow.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit?</li>
        <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
        
        <li class="q"><img src="img/arrow.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit?</li>
        <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
        
        <li class="q"><img src="img/arrow.png"> Lorem ipsum dolor sit amet, consectetur adipiscing elit?</li>
        <li class="a">Suspendisse sit amet elit lacinia, feugiat magna at, luctus massa. Aliquam sodales dictum nulla. consectetur adipiscing elit.</li>
      </ul>
    </div>
  </body>
</html>



JS:

<script>
  
//Accordian Action
var action = 'click';
var speed = "500";


//Document.Ready
$(document).ready(function(){
  //Question handler
$('li.q').on(action, function(){
  //gets next element
  //opens .a of selected question
$(this).next().slideToggle(speed)
    //selects all other answers and slides up any open answer
    .siblings('li.a').slideUp();
  
  //Grab img from clicked question
var img = $(this).children('img');
  //Remove Rotate class from all images except the active
  $('img').not(img).removeClass('rotate');
  //toggle rotate class
  img.toggleClass('rotate');

});//End on click




});//End Ready
  
  
  
  
  
CSS:

<style>
/*Responsive CSS*/


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'roboto', sans-serif;
  color: #666;
  font-size: 16px;
  background: #f9f9f9;
  line-height: 1.6em;
}

ul, li { list-style: none; }

#container {
  width: 60%;
  margin: 150px auto;
  overflow: auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  height: 40px;
  background: #6bb170;
  color: white;
  text-align: center;
  padding-top: 13px;
}

.faq li { padding: 20px; }

.faq li.q {
  background: #4FC2E;
  font-weight: bold;
  font-size: 120%;
  border-bottom: 1px #ddd solid;
  cursor: pointer;
}

.faq li.a {
  background: #3BB0D6;
  display: none;
  color:#fff;
}

.rotate {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
@media (max-width:800px) {

#container { width: 90%; }
}

</style>
  
</script>