Why we need to use Accordion.?? When we have large content display on webpage but we have to display only s...

Accordian using CSS

                    Why we need to use Accordion.??

When we have large content display on webpage but we have to display only small portion on web page that time we can used accordion. In this only display only title of content whenever hover or click on this it will display whole content.

Here i share demo of accordion .

<style>

.accordion {

    background-color: #eee;

    color: #444;

    cursor: pointer;

    padding: 18px;

    width: 100%;

    border: none;

    text-align: left;

    outline: none;

    font-size: 15px;

    transition: 0.4s;

}

.active, .accordion:hover {

    background-color: #ccc; 

}

.panel {

    padding: 0 18px;

    display: none;

    background-color: white;

    overflow: hidden;

}

</style>

</head>

<body>

<h2 style="color: blue;">Accordion Demo</h2>

<button class="accordion">Fruxinfo Web design </button>

<div class="panel">

  <p><b>Fruxinfo pvt. ltd. </b></br>We have 4+ year proffesional experienced designer.  </p>

</div>

<button class="accordion">Fruxinfo app developement </button>

<div class="panel">

  <p><b>Fruxinfo pvt. ltd. </b></br>We have 3+ year proffesional experienced app developer.</p>

</div>

<button class="accordion">fruxinfo Graphics</button>

<div class="panel">

  <p><b>Fruxinfo pvt. ltd. </b> We are providing logodesign , PSD ,PSD to HTML. We have experienced designer for graphics. </p>

</div>

<script>

var acc = document.getElementsByClassName("accordion");

var i;

for (i = 0; i < acc.length; i++) {

    acc[i].addEventListener("click", function() {

        this.classList.toggle("active");

        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {

            panel.style.display = "none";

        } else {

            panel.style.display = "block";

        }

    });

}

</script> 

Accordion Demo

Fruxinfo pvt. ltd. We have 4+ year proffesional experienced designer.
Fruxinfo pvt. ltd. We have 3+ year proffesional experienced app developer.
Fruxinfo pvt. ltd. We are providing logodesign , PSD ,PSD to HTML. We have experienced designer for graphics.
Fruxinfo pvt.ltd.

0 coment�rios: