• Web & Html

How To Make An Html Accordion

What is an Accordion?

Html accordions are html components that allow you see contents of a topic on a web page when you clicked on the Topic.

The contents remain hidden until you click on its related topic before it is revealed.

Accordions can help organize your webpage in a beautiful way and also economize space.  To make an HTML accordion, knowledge of HTML, CSS and little of JQUERY is required.
So let’s get started.

The HTML

  1. First of all we create a div with a class “Accordion-Wrapper”.

<div class="accordion-wrapper"></div>

  1. Secondly we create another div with a class “accordion” then put it inside “accordion-wrapper”.

<div class="accordion-wrapper">

<div class="accordion"></div>
</div>

 

  1. Let’s create a topic and content div inside the accordion div. We will call the topic div “accordion-head” and content div “accordion-body”

<div class="accordion-wrapper">

                <!--first Accordion-->

<div class="accordion">

<div class="accordion-head">Topic 1</div>

<div class="accordion-body">content 1</div>

</div>

</div>

  1. Let’s add more accordion divs to the "accordion-wrapper".

<div class="accordion-wrapper">

                <!--first Accordion-->

<div class="accordion">

<div class="accordion-head">Topic 1</div>

<div class="accordion-body">content 1</div>

</div>

                <!--second Accordion-->

<div class="accordion">

<div class="accordion-head">Topic 2</div>

<div class="accordion-body">content 2</div>

</div>

<!--third Accordion-->

<div class="accordion">

<div class="accordion-head">Topic 3</div>

<div class="accordion-body">content 3</div>

</div>

</div>

 

That is all for the html part.

 

THE CSS (style sheet)

You can style your html document in an external sheet but for this course we will use internal styling. So at the head section of your html document, do the following.

<style type="text/css">

.accordion-wrapper{

padding:5px;

border:#000 1px dashed;

width:300px;

}

.accordion-head{

padding:10px;

border:#333 solid 1px;

cursor:pointer;

font-weight:bold;

}

.accordion-head.active{

background-color:#000;

color:#fff;

}

.accordion-body{

padding:10px;

display:none

}

</style>

 

THE JQUERY

We are going to use google jquery.min.js script to add to our page as seen below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

Next, we write our custom jquery script to control our accordion as shown below.

<script type="text/javascript">

$(document).ready(function(e) {

$(".accordion-head").click(function(){

 

$(this).addClass("active");

$(".accordion-head").not(this).removeClass("active");

                               

var parent= $(this).closest(".accordion");

var child = parent.find(".accordion-body");

if(child.css("display")=="none"){

parent.find(".accordion-body").slideDown();

}else{

parent.find(".accordion-body").slideUp();

}

                               

$(".accordion-body").not(child).slideUp();

});

});

</script>

 

That is All.

You can click here to download the source file.

Happy coding


17 May

Madagascar's Covid Organic 

Amid growing support across Africa and caution by the World Health Organization, WHO; some Madagascans are queuing on a daily basis to received the purported virus prevention and treating herbal cure, COVID-Organics. In front of the town hall in the capital Antananarivo, Robert is impatient waiting ...

01 May

Tiny Man Precariously Balances An Elephant On His Back

By Katie Hosmer

The work of French artist Fabien Mrelle involves creative combinations of dreams, experiences, and his early childhood imagination. He blurs the line between reality and fiction and his bio states: “Following the unrolling of a dream, playing with the free association of shapes and ideas, he seems ...


Comments

No Comments Found!


Post a Comment

Your comment was successfully posted! and will show up shortly

Latest Posts

Achive

Tags

Photostream