Accordion

Developer
KimLaRocca
Size
4,517 Kb
Views
8,096
  1. Accordion Previews
  2. Accordion HTML Codes
  3. Accordion CSS Codes
  4. Accordion JS Codes

How do I make an accordion?

Responsive accordion with auto-scroll and hash support. What is a accordion? How do you make a accordion? This script and codes were developed by KimLaRocca on 29 November 2022, Tuesday.

Accordion Previews
IQ Test

Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="javascript:scrollToAccordion(3);">go to accordion 3</a><br><br>
<a href="javascript:scrollToInnerID('2','2a');">go to accordion 2 and ID 2a</a><br><br>
<div class="accordionContainer"> <!-- <div class="accordionItem"> <div class="accordionHeader">header</div> <div class="accordionContent"> <p>content</p> </div> </div> --> <div class="accordionItem"> <div class="accordionHeader" id="1">What is embrace® Active Scar Defense?</div> <div class="accordionContent"> <p>embrace® Active Scar Defense is the first scar management product of its kind. The two part device includes a patented self-applicator and a silicone dressing. Once applied over the forming scar, embrace® relieves the natural tension that exists during the skin’s healing process–effectively treating the primary culprit of scarring.</p> <p>For more information on embrace Active Scar Defense, click here</p> </div> </div> <div class="accordionItem"> <div class="accordionHeader" id="2">What is embrace® MINIMIZE?</div> <div class="accordionContent"> <p>Developed by two of the world’s leading scar experts and renowned plastic surgeons, embrace MINIMIZE™ is a silicone scar-aid made with patented Stress-Shield™ Technology + 100% medical grade silicone. embrace MINIMIZE™ protects and hydrates the scar site, helping to improve the scar’s appearance and texture in as little as 4 weeks.</p> <p> embrace MINIMIZE™ is intended for use on old, existing hypertrophic and keloid scars from cuts, injuries, or surgeries. Each sheet is designed to last an average of 10 days then discarded. embrace MINIMIZE™ may be cut to size for smaller scars. If you are trying to improve the appearance of an existing scar you’ve had for more than 6 months, then embrace MINIMIZE™ is right for you. If you are looking to treat a newly forming scar that is less than 6 months old, use embrace® Active Scar Defense.</p> <p id="2a"> Currently, embrace MINIMIZE is not sold through physician offices and is only sold online.</p> <p> For more information on embrace MINIMIZE, click here.</p> </div> </div> <div class="accordionItem"> <div class="accordionHeader" id="3">What is the average treatment time for embrace® Active Scar Defense?</div> <div class="accordionContent"> <p>It is recommended to apply embrace® 1-4 weeks after suture removal on a closed, dry incision, where no scabs are present and worn for approximately 8 weeks (about 2 months). For newly formed scars, treatment with embrace® can be initiated up to 6 months post-surgery. If you scar easily or have a history of keloid scarring, embrace® should be worn for 12 weeks or longer.</p> <p> embrace MINIMIZE™ is intended for use on old, existing hypertrophic and keloid scars from cuts, injuries, or surgeries. Each sheet is designed to last an average of 10 days then discarded. embrace MINIMIZE™ may be cut to size for smaller scars. If you are trying to improve the appearance of an existing scar you’ve had for more than 6 months, then embrace MINIMIZE™ is right for you. If you are looking to treat a newly forming scar that is less than 6 months old, use embrace® Active Scar Defense.</p> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accordion - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
.accordionContainer { width: 100%; font-family: "Open Sans", sans-serif; color: #666; font-size: 16px;
}
.accordionContainer a, .accordionContainer a:visited, .accordionContainer a:active { text-decoration: none; color: #cc0000;
}
.accordionContainer a:hover { cursor: pointer;
}
.accordionContainer p { margin: 0; padding: 0; text-align: left; line-height: 2em;
}
.accordionItem { margin-bottom: 10px;
}
.accordionHeader { background: #fff; font-weight: bold; min-height: 35px; line-height: 35px; padding: 0 20px; cursor: pointer;
}
.accordionContent { display: none; background: #fff; padding: 0 20px;
}

Accordion - Script Codes JS Codes

function openAccordion(hash) { //add active class to accordion $(".accordionHeader").removeClass("active"); $("#" + hash).addClass("active"); //open accordion $("#" + hash).next(".accordionContent").slideDown(); //scroll to accordion $("html, body").animate( { scrollTop: $("#" + hash).offset().top }, "slow" );
}
function scrollToInnerID(accordionID, innerID) { //scroll to accordion scrollToAccordion(accordionID); //scroll to inner ID $("html, body").animate( { scrollTop: $("#" + innerID).offset().top }, "slow" );
}
$(document).ready(function() { console.log("ready"); //accordion toggle $(".accordionHeader").click(function() { $(this).toggleClass("active"); $(this).next(".accordionContent").slideToggle(); //uncomment this if you want it to scroll to top when opening an accordion /* if($(this).hasClass('active')){	$('html, body').animate({	scrollTop: $(this).offset().top	}, 'slow'); } */ }); //check hash //open and scroll to the accordion with the ID passed through the hash if (window.location.hash) { //put hash in variable, remove the # character var hash = window.location.hash.substring(1); scrollToAccordion(hash); }
});
Accordion - Script Codes
Accordion - Script Codes
Home Page Home
Developer KimLaRocca
Username kimlarocca
Uploaded November 29, 2022
Rating 3
Size 4,517 Kb
Views 8,096
Do you need developer help for Accordion?

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!

KimLaRocca (kimlarocca) Script Codes
Name
Multi Level Menu
Text Ripple Effect
Highbrow Basic HTML Lesson 2
Horizontally center a row of floated elements
Responsive Tabs To Accordions
Highbrow Basic HTML Lesson 5
Character Fade Wipe
Curved Section Seperator
Highbrow Basic HTML Lesson 6
Mega Menu Prototype
Create amazing captions 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!