Accordion
How do I make an accordion?
What is a accordion? How do you make a accordion? This script and codes were developed by Nic on 19 November 2022, Saturday.
Accordion - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>accordion</title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css'>
</head>
<body> <div class="row"> <div class="columns large-6 callout warning"> <ul class="accordion" data-accordion="data-accordion" data-activate-default role="tablist"> <!--Dentistry--> <li class="accordion-item" data-accordion-item="data-accordion-item"> <a href="#l5tw2i-accordion" class="accordion-title" aria-controls="l5tw2i-accordion" role="tab" id="l5tw2i-accordion-label" aria-expanded="false" aria-selected="false">Dentistry</a> <div class="accordion-content" data-tab-content="data-tab-content" role="tabpanel" aria-labelledby="l5tw2i-accordion-label" aria-hidden="true" id="l5tw2i-accordion"> <ul> <li> <a href="/dentistry/">College of Dentistry</a> <ul> <li><a href="/dentistry/Fac_Depts/bidx.php">Diagnostic Sciences & Oral Medicine</a></li> <li><a href="/dentistry/omds/">Oral and Maxillofacial Diagnostic Services</a></li> <li><a href="/dentistry/dental-hygiene/">Dental Hygiene, Entry Level (B.S. Degree)</a></li> <li><a href="/dentistry/dental-hygiene/masters/index.php">Dental Hygiene, Graduate Program (MDH Degree)</a></li> <li><a href="/dentistry/Fac_Depts/endo.php">Endodontics</a></li> <li><a href="/dentistry/Fac_Depts/general-practice-staff.php">General Practice</a></li> <li><a href="/dentistry/Fac_Depts/oms.php">Oral & Maxillofacial Surgery</a></li> <li><a href="/dentistry/Fac_Depts/ortho.php">Orthodontics</a></li> <li><a href="/dentistry/Fac_Depts/pedocoh.php">Pediatric Dentistry & Community Oral Health</a></li> <li><a href="/dentistry/Fac_Depts/perio.php">Periodontology</a></li> <li><a href="/dentistry/Fac_Depts/rest.php">Prosthodontics</a></li> <li><a href="/dentistry/research/">Bioscience Research</a></li> <li><a href="/dentistry/Fac_Depts/newrest.php">Restorative</a></li> </ul> </li> </ul> </div> </li> <!--Graduate Health Sciences--> <li class="accordion-item" data-accordion-item="data-accordion-item"> <a href="#top" class="accordion-title" aria-controls="41zvis-accordion" role="tab" id="41zvis-accordion-label" aria-expanded="false" aria-selected="false">Graduate Health Sciences</a> <div class="accordion-content" data-tab-content="data-tab-content" role="tabpanel" aria-labelledby="41zvis-accordion-label" aria-hidden="true" id="41zvis-accordion"> <ul> <li> <a href="/grad/">College of Graduate Health Sciences</a> <ul> <li><a href="/grad/Programs/index.php?page=BIOM">Biomedical Engineering and Imaging</a></li> <li><a href="/grad/Programs/index.php?page=DSCI">Dental Science (Masters only)</a> </li> <li><a href="/grad/Programs/index.php?page=BIOE">Epidemiology (Masters only)</a> </li> <li><a href="/grad/Programs/index.php?page=HOPR">Health Outcomes and Policy Research</a></li> <li><a href="/grad/PROGRAMS/BCLRMMO.php">Biomedical Sciences (Masters only)</a> </li> <li><a href="/grad/IBS/">Integrated Program in Biomedical Sciences (PhD only)</a> </li> <li><a href="/grad/Programs/index.php?page=NSG">Nursing</a></li> <li><a href="/grad/Programs/index.php?page=PharmSci">Pharmaceutical Sciences</a></li> <li><a href="/grad/Programs/index.php?page=PharmacologyMS">Pharmacology (Masters only)</a> </li> <li><a href="/health-professions/asp/phd/index.php">Speech and Hearing Science</a></li> </ul> </li> </ul> </div> </li> <!--Health Professions--> <li class="accordion-item" data-accordion-item="data-accordion-item"> <a href="#" class="accordion-title" aria-controls="a18o2w-accordion" role="tab" id="a18o2w-accordion-label" aria-expanded="false" aria-selected="false">Health Professions</a> <div class="accordion-content" data-tab-content="data-tab-content" role="tabpanel" aria-labelledby="a18o2w-accordion-label" aria-hidden="true" id="a18o2w-accordion"> <ul> <li> <a href="/health-professions/">College of Health Professions</a> <ul> <li><a href="/health-professions/asp/index.php">Audiology & Speech Pathology</a></li> <li><a href="/health-professions/cls/index.php">Clinical Laboratory Sciences</a></li> <li><a href="/health-professions/cls/ct/index.php">Cytotechnology & Histotechnology </a></li> <li><a href="/health-professions/him/index.php">Health Informatics & Information Management</a></li> <li><a href="/health-professions/cls/mls/index.php">Medical Laboratory Science</a></li> <li><a href="/health-professions/ot/index.php">Occupational Therapy</a></li> <li><a href="/health-professions/pt/index.php">Physical Therapy, Entry Level (DPT Degree)</a></li> <li><a href="/health-professions/pt/programs/pt-graduate/index.php">Physical Therapy, Graduate Program (MSPT Degree)</a></li> <li><a href="/health-professions/pt/programs/pt-graduate/index.php">Physical Therapy, Graduate Program (ScDPT Degree)</a></li> </ul> </li> </ul> </div> </li> <!--Medicine--> <li class="accordion-item" data-accordion-item="data-accordion-item"> <a href="#" class="accordion-title" aria-controls="hzaffg-accordion" role="tab" id="hzaffg-accordion-label" aria-expanded="false" aria-selected="false">Medicine</a> <div class="accordion-content" data-tab-content="data-tab-content" role="tabpanel" aria-labelledby="hzaffg-accordion-label" aria-hidden="true" id="hzaffg-accordion"> <ul> <li> <a href="/medicine/">College of Medicine</a> <ul> <li><a href="/anatomy-neurobiology/">Anatomy & Neurobiology</a></li> <li><a href="/anesthesiology/">Anesthesiology</a></li> <li><a href="/compmed/">Comparative Medicine</a></li> <li><a href="/dermatology/">Dermatology</a></li> <li><a href="/fammed/">Family Medicine</a></li> <li><a href="/internalmedicine/">Medicine</a></li> <li><a href="/molecular_sciences/">Microbiology, Immunology and Biochemistry</a></li> <li><a href="/neurology/">Neurology</a></li> <li><a href="/neurosurgery/">Neurosurgery</a></li> <li><a href="/obgyn/">Obstetrics and Gynecology</a></li> <li><a href="/eye/">Ophthalmology</a></li> <li><a href="/ortho/">Orthopaedic Surgery & Biomedical Engineering</a> </li> <li><a href="/otolaryngology/">Otolaryngology - Head and Neck Surgery</a> </li> <li><a href="/pathology/">Pathology and Laboratory Medicine</a></li> <li><a href="/pediatrics/">Pediatrics</a></li> <li><a href="/pharmacology/">Pharmacology</a></li> <li><a href="/physician-assistant/">Physician Assistant</a></li> <li><a href="/physiology/">Physiology</a></li> <li><a href="/plasticsurgery/">Plastic Surgery</a></li> <li><a href="/prevmed/">Preventive Medicine</a></li> <li><a href="/psych/">Psychiatry</a></li> <li><a href="/radiology/">Radiology</a></li> <li><a href="/surgery/">Surgery</a></li> <li><a href="/urology/">Urology</a></li> </ul> </li> </ul> </div> </li> <!--Nursing--> <li class="accordion-item" data-accordion-item="data-accordion-item"> <a href="#" class="accordion-title" aria-controls="cbglle-accordion" role="tab" id="cbglle-accordion-label" aria-expanded="false" aria-selected="false">Medicine</a> <div class="accordion-content" data-tab-content="data-tab-content" role="tabpanel" aria-labelledby="cbglle-accordion-label" aria-hidden="true" id="cbglle-accordion"> <ul> <li> <a href="nursing/">College of Nursing</a> <ul> <li><a href="/nursing/academic-programs/index.php">Academic Programs</a></li> <li><a href="/nursing/continuing-education/index.php">Continuing Education</a> </li> <li><a href="/nursing/practice-programs/index.php">Practice Programs</a></li> <li><a href="/nursing/research-programs/index.php">Research Programs</a></li> <li><a href="/nursing/academic-programs/BSN/index.php">Bachelor of Science in Nursing (BSN)</a></li> <li><a href="/nursing/academic-programs/MSN/index.php">Clinical Nurse Leader (CNL)</a></li> <li><a href="/nursing/academic-programs/DNP/index.php">Doctor of Nursing Practice (DNP)</a></li> <li><a href="/nursing/academic-programs/DNP/nurse_anesthesia/index.php">Nurse Anesthesia (DNP)</a></li> <li><a href="/nursing/academic-programs/PhD/index.php">Doctor of Philosophy (PhD)</a></li> </ul> </li> </ul> </div> </li> <!--Pharmacy--> <li class="accordion-item" data-accordion-item="data-accordion-item"> <a href="#" class="accordion-title" aria-controls="sig161-accordion" role="tab" id="sig161-accordion-label" aria-expanded="false" aria-selected="false">Pharmacy</a> <div class="accordion-content" data-tab-content="data-tab-content" role="tabpanel" aria-labelledby="sig161-accordion-label" aria-hidden="true" id="sig161-accordion"> <ul> <li> <a href="/pharmacy/">College of Pharmacy</a> <ul> <li><a href="/pharmacy/dcp/">Department of Clinical Pharmacy</a></li> <li><a href="/pharmacy/pharmsci/">Department of Pharmaceutical Sciences</a></li> </ul> </li> </ul> </div> </li> </ul> </div> <div class="columns large-6 callout alert"> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Accordion - Script Codes JS Codes
$(document).foundation();
$(document).foundation({ accordion: { callback : function (accordion) { $("html, body").animate({ scrollTop: accordion.parent().offset().top }, 1000); } }
});
Developer | Nic |
Username | nicwinn |
Uploaded | November 19, 2022 |
Rating | 3 |
Size | 3,455 Kb |
Views | 12,144 |
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!
Name | Size |
Bottom Navigation | 24,832 Kb |
Foundation 6.1.1 button bug | 1,590 Kb |
A Pen by nic | 1,586 Kb |
Focus on first input | 3,422 Kb |
Accordion | 3,455 Kb |
Foundation | 1,476 Kb |
Foundation 6.2.0 data-equalizer | 2,065 Kb |
CSS Link Icons with jQuery Titles | 2,312 Kb |
Foundation 6.2.3 data-equalizer | 2,101 Kb |
UTHSC Mission Icon Set | 1,835 Kb |
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!
Name | Username | Size |
SVG hamburger menu button | Elifitch | 2,602 Kb |
STIKHOI | Denmch | 7,122 Kb |
Asteroids | Davedehaan | 2,846 Kb |
Practice using Wixel | Emnk | 3,057 Kb |
CSS Hover Effects | Alen | 3,613 Kb |
Canvas Background Effect | Sonick | 3,513 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
My three.js practice | Esambino | 3,203 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!