JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>


<div class="modal-courses" id="ModalCourse1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">

				<div class="modal-header">
					<h3 class="modal-title" id="exampleModalLabel">Level(1): Training Sales</h3>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				</div>

				<div class="modal-body">
				<p class="inside-course-modal">Written specifically for people new to the automotive industry, Level 1 courses are designed to provide the core skills, behaviors and competencies required to maximize personal performance as a Sales Executive.</p>
					<ul class="accordion">
						<li>
							<a class="toggle" href="javascript:void(0);"><b>- Technical for Sales People</b></a>
								<ul class="inner">
									<li>
										<a href="#" class="toggle">Length:</a>
											<div class="inner"><p class="inside-course-modal">1 Day</p></div>
									</li>
									<li>
										<a href="#" class="toggle">Format:</a>
											<div class="inner"><p class="inside-course-modal">Interactive workshop</p></div>
									</li>
									<li>
										<a href="#" class="toggle">Competency level on completion:</a>
											<div class="inner"><p class="inside-course-modal">Accredited Sales Executive</p></div>
									</li>
									<li>
										<a href="#" class="toggle">Audience:</a>
											<div class="inner"><p class="inside-course-modal">Anyone working in an automotive dealership.</p></div>
									</li>
									<li>
										<a href="#" class="toggle">Course Overview:</a>
											<div...

CSS

ul 
	{list-style: none;
	padding: 0;}

	ul .inner 
	{padding-left: 1em;
	overflow: hidden;
	display: none;}

	ul .inner.show {
	/*display: block;*/}

	ul li 
	{margin: 0.5em 0;}

	ul li a.toggle 
	{width: 100%;
	display: block;
	background: grey;
	color: #fefefe;
	padding: 0.75em;
	border-radius: 0.15em;
	transition: background 0.3s ease;
	text-decoration: none;}

	ul li a.toggle:after
	{content: '\002B';
	float: right;}

	ul li a.toggle:hover {
	background: yellow;}

	.modal-dialog {
	max-width: 70% !important;
	margin: auto;}
	
	.modal-content 
	{height: 500px;	}
	
	.modal-body 
	{background-color: rgb(3, 119, 184);
	height: 250px;
	overflow-y: scroll;}
	
	
	
	.toggle.is-active {
    background-color: #ff00ff;
}

.accordion li li .toggle {
	background-color: pink;
}

JavaScript

$('.toggle').click(function(e) {
    e.preventDefault();

    var $this = $(this);

    if ($this.next().hasClass('show')) {
        $this.removeClass('is-active');
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('.is-active').removeClass('is-active');
        $this.addClass('is-active');
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});