JSFiddle - React, Tailwind, and code Playground

jQuery: FAQ Style Divs

by Jennifer Perrin

HTML

<ul id="faq">
<li>
<h3>1. Lorem ipsum dolor sit amet?</h3>
<p>Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
</li>
<li>
<h3>2. Lorem ipsum dolor sit amet?</h3>
<p>Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
</li>
<li>
<h3>3. Lorem ipsum dolor sit amet?</h3>
<p>Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
</li>
<li>
<h3>4. Lorem ipsum dolor sit amet?</h3>
<p>Lorem ipsum dolor sit amet, consectur amet ipsum amet.  Lorem ipsum dolor sit amet, consectur amet ipsum amet.</p>
</li>
</ul>

CSS

*{margin:0;padding:0;}

body{
    color:#fff;
    font: small/1.4 Helvetica,Arial,sans-serif;
    margin:20px auto;
    width:600px;
}

h2{margin:15px 0;}

#faq li{
    background-color:#606060;
    list-style-type:none;
    margin-bottom:10px;
    padding:6px;
}

#faq h3{
    background:#efefef;
    color:#313131;
    padding:5px;
    padding-left:20px;
}

#faq p{margin:15px 10px; color: #fff;}

JavaScript

$(document).ready(function(){
    $("#faq li > h3").each(function(){
        $(this).siblings().wrapAll('<div>');
    });
    
    $("#faq li > *:not(h3)").hide();    
    
    $("#faq h3").css("cursor","pointer").click(function (){
        var domanda = $(this);
        var minus = {
            'background-image':'url(img/minus.gif)'
        };
        var plus = {
            'background-image':'url(img/plus.gif)'
        };
        var risposta = domanda.siblings();

        if (risposta.is(':hidden')){
            domanda.css(minus);
        } else {
            domanda.css(plus);
        }
        
        risposta.slideToggle("slow");
    });
});