JSFiddle - React, Tailwind, and code Playground

by Derek Nash

HTML

<h1>Frequently Asked Questions</h1>

        <div class="QA-wrapper">
        
            <div class="toggle-btn">Expand All</div>
        
            <div class="question">
                <h3>What is the meaning of life?</h3>
            </div>
            <div class="answer">
                <p>To be happy</p>
            </div>
    
            <div class="question">
                <h3>Who is the best front end developer?</h3>
            </div>
            <div class="answer">
                <p>Derek of course silly!</p>
    
            </div>
         
            <div class="question">
               <h3>How many licks does it take to get to the center of a tootsie pop?</h3>
            </div>
            <div class="answer">
                <p>One... Two... Three.</p>
            </div>
            
            </div>

        <div>&nbsp;</div> <!-- Needed for white box like frame on mobile size to show -->

SCSS

.QA-wrapper {
						padding-top: 30px;
						.question {  
							width: 100%;
							float: left;
							h3 {
								@include myriad-pro-Semibold;
								color: $red;
							}
							cursor: pointer;
							background-image: url(/static/nplate/images/plusCircle.png);
							background-repeat: no-repeat;
							background-position: 0px 21px;
							border-top: 2px solid $anchor-link-blue;
							padding: 5px 0 5px 37px;
						}
						.answer {
							display: none;
							margin-top: -20px;
							padding-bottom: 5px;
							width: 100%;
							float: left;
							padding-left: 37px;
						}
						.active {
							background-image: url(/static/nplate/images/plusCircleExpanded.png);
							background-repeat: no-repeat;
							background-position: 0px 21px;
							h3 {
								color: blue;
							}
						}
						a {
							color: #000;
							text-decoration: none;
						}
						a:hover{text-decoration:underline}
						.toggle-btn {
							padding-bottom: 10px;
							cursor: pointer;
							text-align: right;
							margin-top: -20px;
							width: 100%;
							float: left;
							cursor: pointer;
							position: relative;
							background-image: url(/static/nplate/images/plusCircleSm.png);
							background-repeat: no-repeat;
							background-position: 190px 0px;
							margin-left: -6px;
							color: $int-black;
							@include myriad-pro-Bold;
							@include font-size(12px);
						}
						.active-toggle-btn {
							background-image: url(/static/nplate/images/plusCircleExpandedSm.png);
							background-repeat: no-repeat;
							background-position: 190px 0px;
						}
						.toggle-btn:hover {
							text-decoration: underline;
						}
					}

JavaScript

// accordian
$(document).ready(function() {
	$('.question').click(function() {
		$(this).next().slideToggle();
		$(this).toggleClass('active');
	}),
    $('.toggle-btn').click(function() {
    $('.question',$(this).parent()).addClass('active');
		$(this).toggleClass('active-toggle-btn');
		if ($(this).hasClass('active-toggle-btn')){
			$('.answer',$(this).parent()).slideDown(400);
			$(this).text('Reduce All');
		} else {
			$('.question',$(this).parent()).toggleClass('active');
			$('.answer',$(this).parent()).slideUp(400);
			$(this).text('Expand All');  
		}
	})
});