Главная » Языки программирования

Css and jquery accordion

Содержание
  1. 33 jQuery Accordions
  2. Related Articles
  3. Table of Contents:
  4. jQuery Accordion Examples
  5. Author
  6. Links
  7. Made with
  8. About a code
  9. jQuery Accordion with Arrow (No Bootstrap)
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. Dropdown/Accordion
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Custom Accordion for Right
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. jQuery Accordion
  25. Author
  26. Links
  27. Made with
  28. About a code
  29. Accordion Scroll Top
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. Accordion and Google Schema
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. jQuery Accordion Styles
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. Simple Sliding Accordion
  45. Author
  46. Links
  47. Made with
  48. About a code
  49. Accordion Slider
  50. Author
  51. Links
  52. Made with
  53. About a code
  54. Image Accordions
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. Accordion With Close Button
  60. Author
  61. Links
  62. Made with
  63. About a code
  64. Simple Responsive jQuery Accordion
  65. Author
  66. Links
  67. Made with
  68. About a code
  69. Responsive jQuery Accordion
  70. Author
  71. Links
  72. Made with
  73. About a code
  74. Accordion with dt & dd tags.
  75. Author
  76. Links
  77. Made with
  78. About a code
  79. CSS-JS Multi-Level Accordion
  80. Author
  81. Links
  82. Made with
  83. About a code
  84. CSS Animation for jQuery Accordion
  85. Author
  86. Links
  87. Made with
  88. About a code
  89. Accordion
  90. Author
  91. Links
  92. Made with
  93. About a code
  94. jQuery Accordion Navigation Menu
  95. Author
  96. Links
  97. Made with
  98. About a code
  99. Accordion Menu
  100. Author
  101. Links
  102. Made with
  103. About a code
  104. 4 Lines jQuery Accordion
  105. Author
  106. Links
  107. Made with
  108. About a code
  109. 3D Accordion
  110. Author
  111. Links
  112. Made with
  113. About a code
  114. Accordion Profile
  115. Author
  116. Links
  117. Made with
  118. About a code
  119. jQuery Accordion
  120. Author
  121. Links
  122. Made with
  123. About a code
  124. Sassy Accordion
  125. Author
  126. Links
  127. Made with
  128. About a code
  129. Accordion Multi Menu
  130. Author
  131. Links
  132. Made with
  133. About a code
  134. jQuery (UI-Less) Accordion
  135. Author
  136. Links
  137. Made with
  138. About a code
  139. Simple Sass/jQuery Accordion
  140. jQuery Accordion Plugins
  141. Author
  142. Links
  143. Made with
  144. About a code
  145. Accordion with jQuery
  146. Author
  147. Links
  148. Made with
  149. About a code
  150. Arai Accordion
  151. Author
  152. Links
  153. Made with
  154. About a code
  155. Ziehharmonika
  156. Author
  157. Links
  158. Made with
  159. About a code
  160. Simple Jquery Multi Accordion
  161. Author
  162. Links
  163. Made with
  164. About a code
  165. jQuery Accessible Accordion System
  166. Author
  167. Links
  168. Made with
  169. About a code
  170. jQuery Accordion
  171. Accordion
  172. Examples
  173. Interactions
  174. Widgets
  175. Effects
  176. Utilities
  177. Books
  178. How to make Accordion with HTML, CSS and jQuery
  179. Contents
  180. 1. HTML
  181. 2. CSS
  182. 3. jQuery
  183. 4. Demo
  184. 5. Conclusion
Читайте также:  Php include html in div

33 jQuery Accordions

Collection of free vertical and horizontal jQuery UI accordion code examples and plugins from Codepen and GitHub. Update of September 2021 collection. 2 new items.

Table of Contents:

jQuery Accordion Examples

Author

Made with

About a code

jQuery Accordion with Arrow (No Bootstrap)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animated accordion in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Custom Accordion for Right

jQuery custom accordion with Material Design Iconic font.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Scroll Top

Accordion with scroll animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion and Google Schema

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery Accordion Styles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple Sliding Accordion

Simple vertical sliding accordion with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Slider

Simple horizontal jQuery accordion slider.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Image Accordions

Image accordions demo with swiper.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: swiper.css, swiper.js

Author

Made with

About a code

Accordion With Close Button

This is a simple example of how you can create an accordion from a regular HTML tag and a pair of jQuery lines. We often resort to using complex patterns and writing long code when creating sliders and accordions, completely forgetting that there are very simple ways to solve these problems. Here you do not need to be well versed in the code to stylize it and add animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple Responsive jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Responsive jQuery Accordion

A responsive jQuery accordion that allows the user to navigate from form to form by clicking on tabs, using the arrow keys and clicking on the provided arrow buttons. Created using jQuery and Bootstrap.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, bootstrap.css

Author

Made with

About a code

Accordion with dt & dd tags.

jQuery accordion using definition lists.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS-JS Multi-Level Accordion

A multi-level CSS and JS (jQuery) accordion. This has the feature to pre-open a list group on initial page load, by simply adding the is-open class to the list item that has has-children class. HTML and CSS are written using the BEM syntax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Animation for jQuery Accordion

Accordion for meteo application in jQuery with CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery Accordion Navigation Menu

A reusable jQuery accordion navigation menu, works with any amount of categories and subcategories.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Menu

Hamburger slide accordion menu with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

4 Lines jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

3D Accordion

Simple jQuery accordion with 3D folding paper effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Accordion Profile

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Sassy Accordion

Simple CSS only accordion built with Sass primarily for dynamic color scheming.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, bootstrap.js, lastoftype.js

Author

Made with

About a code

Accordion Multi Menu

Simple, stylish and modern vertical accordion menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery (UI-Less) Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple Sass/jQuery Accordion

CSS3/Sass/jQuery accordion that has some simple animations with arrows all done in CSS (sliding and click states done with jQuery).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

jQuery Accordion Plugins

Author

Made with

About a code

Accordion with jQuery

Simple accordion with jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Arai Accordion

HTML, CSS and JS accordion UI-component for scalable projects. User-friendly and accessible: WAI ARIA 1.1 compliant.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Ziehharmonika

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple Jquery Multi Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery Accessible Accordion System

This jQuery plugin will transform a simple list of hx and div ’s into a fantastic-shiny accordion system, using ARIA.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

jQuery Accordion

Responsive, CSS powered, jQuery accordion plugin. Jquery Accordion uses CSS transitions to animate opening/closing with a fallback to jQuery’s animate when CSS transitions are not supported. It takes little configuration or code to use it on your project.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Источник

Accordion

Displays collapsible content panels for presenting information in a limited amount of space.

Examples

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

html>
html lang="en">
head>
 meta charset="utf-8">
 meta name="viewport" content="width=device-width, initial-scale=1">
 title>jQuery UI Accordion - Default functionality title>
 link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
 link rel="stylesheet" href="/resources/demos/style.css">
 script src="https://code.jquery.com/jquery-3.6.0.js"> script>
 script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"> script>
 script> 
 $( function( ) 
 $( "#accordion" ).accordion();
 > );
 script>
 head>
body>
 
div id="accordion">
 h3>Section 1 h3>
 div>
 p>
 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
 ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
 amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
 odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 p>
 div>
 h3>Section 2 h3>
 div>
 p>
 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
 velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
 suscipit faucibus urna.
 p>
 div>
 h3>Section 3 h3>
 div>
 p>
 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
 Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
 ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
 lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
 p>
 ul>
 li>List item one li>
 li>List item two li>
 li>List item three li>
 ul>
 div>
 h3>Section 4 h3>
 div>
 p>
 Cras dictum. Pellentesque habitant morbi tristique senectus et netus
 et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
 faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
 mauris vel est.
 p>
 p>
 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
 inceptos himenaeos.
 p>
 div>
 div>
 
 body>
 html>

Want to learn more about the accordion widget? Check out the API documentation.

Interactions

Widgets

Effects

Utilities

Books

Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

Источник

How to make Accordion with HTML, CSS and jQuery

The accordion is a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page.

In this tutorial, I show how you can create the accordion using HTML, CSS, and jQuery.

How to make Accordion with HTML, CSS and jQuery

Contents

1. HTML

Create a that contains accordion contents.

Using element for expand/collapse and create a following with .

Completed Code

2. CSS

By default set .accordion div element to display: none for not show all accordion section content to users when it first time load.

Completed Code

.accordion < width:70%; margin:0 auto; >/* accordion heading */ .accordion h1 < font-size:26px; font-weight: normal; text-align: center; margin-bottom:0px; margin-top:0px; background-color:gainsboro; padding-top:7px;padding-bottom:7px; border:1px solid darkgrey; border-radius:3px; >.accordion h1:hover < cursor:pointer; >/* accordion section content */ .accordion div < display:none; padding:10px; height:200px; line-height:20px; border:1px solid gray; border-radius:3px; >@media screen and (max-width:480px) < .accordion< width:100%; margin:0; >>

3. jQuery

On the click of element hide opened sections and show next element following with .

Completed Code

$(document).ready(function() < $(".accordion h1").click(function()< var /* getting heading id */ /* looping through all elements which have class .accordion-content */ $(".accordion-content").each(function()< if($("#"+id).next()[0].id != this.id)< $(this).slideUp(); >>); $(this).next().toggle(); /* Selecting div after h1 */ >); >);

4. Demo

5. Conclusion

I showed how you can create an accordion using HTML, CSS, and jQuery.

In the demonstration, I used element for the accordion header and expand/collapse sections when it gets clicked. You can use any other HTML element in the place of e.g. , , ,etc.

View this tutorial to know accordion creation using jQuery UI.

If you found this tutorial helpful then don't forget to share.

Источник

Оцените статью
© 2024 Программирование