Accordion with pagination

Developer
Chris Maki
Size
4,650 Kb
Views
40,480
  1. Accordion with pagination Previews
  2. Accordion with pagination HTML Codes
  3. Accordion with pagination CSS Codes
  4. Accordion with pagination JS Codes

How do I make an accordion with pagination?

Mobile accordion with pagination and css animation. Needs some js clean up. Css animation borrowed from http://www.justinaguilar.com/animations/index.html. What is a accordion with pagination? How do you make a accordion with pagination? This script and codes were developed by Chris Maki on 22 July 2022, Friday.

Accordion with pagination Previews
IQ Test

Accordion with pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion with pagination</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div id="faq-links"> <div id="service" class="faq-selected">service</div> <div id="installation">installation</div> <div id="plan">plan</div> <div id="features">features</div> <div id="mobile">mobile</div>
</div>
<div id="faq-wrapper" class="about-service">
<div class="faq-group"> <div class="slide-left"> <div>service</div> </div> <hr>
</div><!--faq-group-->
<div class="slide-left"> <div class="faq"> <ul class="faq-accordion"> <li> <a href="#">insane ipsum</a> <ul class="faq-content"> <li> <div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet k.</p></div> </li> </ul> </li> <!--Bacon ipsum--> <li> <a href="#">Beer Ipsum</a> <ul class="faq-content"> <li> <div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div> </li> </ul> </li> <!--Beer ipsum--> <li> <a href="#">Carey ipsum</a> <ul class="faq-content"> <li> <div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div> </li> </ul> </li> <!--Carey ipsum--> </ul> </div>
</div>
</div> <div class="about-installation faq-hide">
<div class="faq-group"> <div class="slide-left"> <div>installation</div> </div> <hr>
</div> <div class="slide-left"> <ul class="faq-accordion"> <li> <a href="#">Bacon ipsum</a> <ul class="faq-content"> <li> <div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div> </li> </ul> </li> <!--Bacon ipsum--> <li> <a href="#">Beer Ipsum</a> <ul class="faq-content"> <li> <div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div> </li> </ul> </li> <!--Beer ipsum--> <li> <a href="#">Carey ipsum</a> <ul class="faq-content"> <li> <div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div> </li> </ul> </li> <!--Carey ipsum--> </ul> </div><!--lide-left --> </div> <div class="about-plan faq-hide">
<div class="faq-group"> <div class="slide-left"> <div>plan</div> </div> <hr>
</div> <div class="slide-left"> <ul class="faq-accordion"> <li> <a href="#">Duh ipsum</a> <ul class="faq-content"> <li> <div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div> </li> </ul> </li> <!--Bacon ipsum--> <li> <a href="#">Buh Ipsum</a> <ul class="faq-content"> <li> <div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div> </li> </ul> </li> <!--Beer ipsum--> <li> <a href="#">Muh ipsum</a> <ul class="faq-content"> <li> <div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div> </li> </ul> </li> <!--Carey ipsum--> </ul> </div><!--slide-left--> </div> <div class="about-features faq-hide">
<div class="faq-group"> <div class="slide-left"> <div>features</div> </div> <hr>
</div> <div class="slide-left"> <ul class="faq-accordion"> <li> <a href="#">Veggie ipsum</a> <ul class="faq-content"> <li> <div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div> </li> </ul> </li> <!--Bacon ipsum--> <li> <a href="#">Wine Ipsum</a> <ul class="faq-content"> <li> <div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div> </li> </ul> </li> <!--Beer ipsum--> <li> <a href="#">Woody ipsum</a> <ul class="faq-content"> <li> <div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div> </li> </ul> </li> </ul> </div><!--slide-left--> </div> <!--about-features faq-hide--> <div class="about-mobile faq-hide">
<div class="faq-group"> <div class="slide-left"> <div>mobile</div> </div> <hr>
</div> <div class="slide-left"> <ul class="faq-accordion"> <li> <a href="#">Bacon ipsum</a> <ul class="faq-content"> <li> <div><p>Bacon ipsum dolor sit amet ham beef ribs pork, sirloin tail meatball filet mignon pancetta strip steak. T-bone swine turducken fatback beef ribs andouille meatball. Corned beef short ribs ribeye, hamburger brisket venison capicola boudin filet mignon drumstick shankle bacon beef. Shoulder shank filet mignon, kevin meatball beef ribs short loin shankle kielbasa jowl pancetta. Biltong shank tri-tip prosciutto sirloin pastrami. Turkey swine pork loin ground round pig chicken kielbasa sausage kevin ham hock.</p></div> </li> </ul> </li> <!--Bacon ipsum--> <li> <a href="#">Beer Ipsum</a> <ul class="faq-content"> <li> <div><p>ester saccharification mead lambic draft (draught), hand pump cask. brewing ale balthazar hops, " bitter becher craft beer keg alpha acid." crystal malt racking mouthfeel mash, barrel ale; malt! brewpub; biere de garde balthazar acid rest alcohol carbonation. wit beer krug brew mash hop back? shelf life, balthazar hand pump.</p></div> </li> </ul> </li> <!--Beer ipsum--> <li> <a href="#">Carey ipsum</a> <ul class="faq-content"> <li> <div><p>Alrighty then it's because i'm green isn't it! here she comes to wreck the day. alrighty then kinda hot in these rhinos. i just heard about evans new position,good luck to you evan backstabber, bastard, i mean baxter. your entrance was good, his was better. we're going for a ride on the information super highway. we're going for a ride on the information super highway. look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. brain freeze. we got no food we got no money and our pets heads are falling off! haaaaaaarry.</p></div> </li> </ul> </li> <!--Carey ipsum--> </ul> </div><!--slide-left--> </div> <!--about-mobile faq-hide--> </div><!--container--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accordion with pagination - Script Codes CSS Codes

body {font-family: helvetica}
.container {width: 320px; margin: 0 auto; overflow: hidden}
a{text-decoration: none}
#faq-links {padding: 10px 20px}
#faq-links div { color: #aeaeaf; cursor: pointer; font-weight: 700; text-transform: capitalize; margin: 18px 0
}
.faq-group { padding: 0 20px 40px 20px; position: relative
}
.faq-group div { font-weight: 700; text-align: center;
}
.faq-group hr { border: 0; border-top: 1px solid #606060; clear: both; box-sizing: content-box; height: 0;
}
.faq-group:after { top: 33%; left: 50%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;	border-top-color: #393939;	border-width: 15px; margin-left: -15px
}
.faq-accordion>li { border-top: 1px solid rgba(198, 198, 198, 0.4); color: #666; padding: 1.125em 0
}
.faq-accordion li a { color: #666; padding: 1.125em;
}
.faq-accordion > li:last-child { border-bottom: 1px solid rgba(198, 198, 198, 0.4);
}
.faq-accordion > li > a:before { content: 'Q.'; padding-right: 0.313em
}
.faq-accordion > li > a:after { color: #ff8300; content: '+'; float: right; font-weight:300; margin-right: 1.25em; -webkit-transform: scale(2); transform: scale(2); overflow-y: hidden;
}
.faq-accordion > li > a.expanded:after { color: #ffa326; content: '\2212'; -webkit-transform: scale(2); transform: scale(2);
}
.faq-accordion > li > a.expanded {font-weight: 700; opacity: 1 !important}
.faq-content { background-color: #ececec; margin: 20px 0 -20px;
}
.faq-content p:before { content: 'A.'; color: #ff8300; float: left; font-weight: 700; margin-right: .5em
}
.faq-content p { margin: 0 1.2em; padding: 1.250em 0
}
.faq-hide {display: none}
.faq-selected { color: #49494b!important; -webkit-transition: all 1s ease; transition: all 1s ease;
}
.slide-left{	-webkit-animation-name: slide-left;	animation-name: slide-left;	-webkit-animation-duration: 1s; animation-duration: 1s;	-webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
}
@-webkit-keyframes slide-left {	0% {	-webkit-transform: translateX(150%);	}	50%{	-webkit-transform: translateX(-8%);	}	65%{	-webkit-transform: translateX(4%);	}	80%{	-webkit-transform: translateX(-4%);	}	95%{	-webkit-transform: translateX(2%);	}	100% {	-webkit-transform: translateX(0%);	}
}
@keyframes slide-left {	0% {	-webkit-transform: translateX(150%); transform: translateX(150%);	}	50%{	-webkit-transform: translateX(-8%); transform: translateX(-8%);	}	65%{	-webkit-transform: translateX(4%); transform: translateX(4%);	}	80%{	-webkit-transform: translateX(-4%); transform: translateX(-4%);	}	95%{	-webkit-transform: translateX(2%); transform: translateX(2%);	}	100% {	-webkit-transform: translateX(0%); transform: translateX(0%);	}
}

Accordion with pagination - Script Codes JS Codes

/*<p>Pagination part? borrowed from <a href='/JoshBlackwood/'>Joshua Blackwood</a>'s Pen <a href='/JoshBlackwood/pen/yoLBJ/'>yoLBJ</a>.</p>*/
var accordWithPage = function() { var faqDiv = $('#faq-links div');
$(function () {
faqDiv.on("click", function() { var hideSec = 'faq-hide'; var $this = $(this), $id = $this.attr('id'), $class = '.' + $('.about-' + $id).attr('class').replace(hideSec, ''); $('#faq-wrapper').addClass(hideSec); $('.about-' + $id).removeClass(hideSec); $('div[class*=about]').not($class).addClass(hideSec); });
});
$(function () { var select = 'faq-selected'; faqDiv.click(function () { if ($(this).hasClass(select)) { $(this).removeClass(select); } else { $('#faq-links .faq-selected').removeClass(select); $(this).addClass(select); } }); //faq link selected
});
//Accordion
$(function () { var expand = 'expanded'; var content = $('.faq-content'); //FAQ Accordion $('.faq-accordion > li > a').click(function (e) {	e.preventDefault(); if ($(this).hasClass(expand)) { $(this).removeClass(expand);
// $('.faq-accordion > li > a > div').not(this).css('opacity', '1');//returns li back to normal state $(this).parent().children('ul').stop(true, true).slideUp(); } else {
// $('.faq-accordion > li > a > div').not(this).css('opacity', '0.5');//dims inactive li $('.faq-accordion > li > a.expanded').removeClass(expand); $(this).addClass(expand); content.filter(":visible").slideUp(); $(this).parent().children('ul').stop(true, true).slideDown(); } }); //accordion function content.hide();
});
}
accordWithPage();
/*$(function () { $("#faq-links div").click(function () { $('.slide-left').fadeOut( "slow", "linear" ); $('.slide-left').fadeIn( "slow", "linear" ); }); //faq link fade in and out }); //document ready*/
Accordion with pagination - Script Codes
Accordion with pagination - Script Codes
Home Page Home
Developer Chris Maki
Username chrisMaki
Uploaded July 22, 2022
Rating 4
Size 4,650 Kb
Views 40,480
Do you need developer help for Accordion with pagination?

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!

Chris Maki (chrisMaki) Script Codes
Name
Simple Responsive Modal
Objects move into place when scrolled into view
Simple Modal
Mobile navigation using GSAP
Velocity fade in
Messing with GSAP
Css expanding search
Parallax Type Thing
Overlay using mix-blend-mode
Multiply blend mode on hover
Create amazing marketing copy 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!