{"id":29456,"date":"2015-11-04T06:07:09","date_gmt":"2015-11-04T00:37:09","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=29456"},"modified":"2017-09-12T12:45:21","modified_gmt":"2017-09-12T07:15:21","slug":"create-accordion-with-css-and-html-without-js","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/create-accordion-with-css-and-html-without-js\/","title":{"rendered":"Create Accordion with CSS and HTML without JS"},"content":{"rendered":"

There are many way to create the accordion effect with js but following are the example of how to create the accordion only with css and html.<\/p>\n

Here is the image that show which type of accordion I am going to create.<\/h3>\n

\"accordion\"<\/p>\n

Now starts with html code:<\/h3>\n

In this I have used checkbox to use the functionality of click. But we will not display these input checkboxes. We can use display none to hide the checkbox. Also I am using label for tab1 and tab2 design.<\/p>\n

HTML CODE:<\/h3>\n

[java]<div id="nestle-section">
\n\t<input type="radio" id="tab1" name="tabs" checked=""\/>
\n\t<label for="tab1">Tab1<\/label>
\n\t<div class="tab-content1">
\n\t\tLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
\n\t<\/div><\/p>\n

\t<input type="radio" id="tab2" name="tabs"\/>
\n\t<label for="tab2">Tab2<\/label>
\n\t<div class="tab-content1">
\n\t\tLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
\n\t<\/div>
\n<\/div>[\/java]<\/p>\n

Css Code:<\/h3>\n

Styling of Tab1 and Tab2 label:<\/p>\n

[java]#nestle-section{
\n\tfloat:left;
\n\twidth:300px;
\n\tposition:relative;
\n}
\n#nestle-section label{
\n\tfloat:left;
\n\twidth:100%;
\n\tbackground:#333;
\n\tcolor:#fff;
\n\tpadding:5px 0;
\n\ttext-align:center;
\n\tcursor:pointer;
\n\tborder-bottom:1px solid #fff;
\n}[\/java]<\/p>\n

Styling of accordion content:<\/p>\n

[java]#nestle-section .tab-content1{
\n\tfloat:left;
\n\twidth:280px;
\n\tpadding:0 10px;
\n\theight:0;
\n\t-moz-transition: height 1s ease;
\n\t-webkit-transition: height 1s ease;
\n\t-o-transition: height 1s ease;
\n\ttransition: height 1s ease;
\n\toverflow:hidden;
\n}[\/java]<\/p>\n

Then I give the following style for accordion animation onclick of Tab1 and Tab2 labels:<\/p>\n

[java]#nestle-section input:checked + label + .tab-content1{
\n\tpadding: 10px;
\n\theight: 150px;
\n\t-moz-transition: height 1s ease;
\n\t-webkit-transition: height 1s ease;
\n\t-o-transition: height 1s ease;
\n\ttransition: height 1s ease;
\n}
\n#nestle-section input:checked + label{
\n\tbackground:#ccc;
\n\tcolor:#333;
\n}[\/java]<\/p>\n

Then we hide the radio:<\/p>\n

[java]#nestle-section input{
\n\tdisplay:none;
\n}[\/java]<\/p>\n","protected":false},"excerpt":{"rendered":"

There are many way to create the accordion effect with js but following are the example of how to create the accordion only with css and html. Here is the image that show which type of accordion I am going to create. Now starts with html code: In this I have used checkbox to use […]<\/p>\n","protected":false},"author":206,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[3429,1],"tags":[2965,2966,2967,355,4842],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/29456"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=29456"}],"version-history":[{"count":2,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/29456\/revisions"}],"predecessor-version":[{"id":51801,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/29456\/revisions\/51801"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=29456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=29456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=29456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}