JQuery Accordian Slider

Developer
Lisa Macken
Size
2,456 Kb
Views
16,192
  1. JQuery Accordian Slider Previews
  2. JQuery Accordian Slider HTML Codes
  3. JQuery Accordian Slider CSS Codes
  4. JQuery Accordian Slider JS Codes

How do I make an jquery accordian slider?

What is a jquery accordian slider? How do you make a jquery accordian slider? This script and codes were developed by Lisa Macken on 01 October 2022, Saturday.

JQuery Accordian Slider Previews
IQ Test

JQuery Accordian Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Accordian Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>	<head>	<title>FAQ Slider</title>	<link rel="stylesheet" href="css/style.css">	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	<script src="js/script.js"></script>	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>	</head>	<body>	<div id="container">	<h1>jQuery FAQ Slider</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> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Accordian Slider - Script Codes CSS Codes

*{	margin:0;	padding:0;
}
body{	font-family:'Tahoma', sans-serif;	color:#666;	font-size:16px;	background:#f9f9f9;	line-height:1.6em;
}
ul,li{	list-style:none;
}
#container{	width:60%;	margin:30px auto;	overflow:auto;
}
h1{	text-align:center;	margin-bottom:20px;
}
.title{	height:40px;	background:#6bb170;	color:#fff;	text-align:center;	padding-top:13px;
}
.faq li{	padding:20px;
}
.faq li.q{	background:#eee;	font-weight:bold;	font-size:120%;	border-bottom:1px #ddd solid;	cursor:pointer;
}
.faq li.a{	background:#ddd;	display:none;
}
.rotate{	-moz-transform:rotate(90deg);	-webkit-transform:rotate(90deg);	transform:rotate(90deg);
}
@media(max-width:800px){	#container{	width:90%;	}
}

JQuery Accordian Slider - Script Codes JS Codes

var action= "click";
var speed = "500";
$(document).ready(function(){	// Question Handler	$('li.q').on(action, function(){	// Get next element	$(this).next()	.slideToggle(speed)	// Select all other answers	.siblings('li.a')	.slideUp();	// Get image for active question	var img = $(this).children('img');	// Remove the 'rotate' class for all images except the active	$('img').not(img).removeClass('rotate');	// Toggle rotate class	img.toggleClass('rotate');	});
});
JQuery Accordian Slider - Script Codes
JQuery Accordian Slider - Script Codes
Home Page Home
Developer Lisa Macken
Username lmack90
Uploaded October 01, 2022
Rating 3
Size 2,456 Kb
Views 16,192
Do you need developer help for JQuery Accordian Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lisa Macken (lmack90) Script Codes
Name
Image moves with mouse
Simple Quiz
A JQuery Mobile Quiz Game
Scrollable svg Animations
Carousel
SVG icons
A Pen by Lisa Macken
Animation examples
Columns everywhere
RollOver Effect 2
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!