JSFiddle - React, Tailwind, and code Playground

by unknown601

HTML

<span class="dropdown-link" id="hover1">Details<span class="arrow-small"> &#9660 </span></span>
<div class="dropdown1"><span class="main-body-text">Refer section “Full Information’.</span>

</div><span class="dropdown-link" id="hover2">Details<span class="arrow-small"> &#9660 </span></span>
<div class="dropdown2"><span class="main-body-text">Refer section “Full Information’.</span>

</div>
<span class="dropdown-link" id="hover3">Details<span class="arrow-small"> &#9660 </span></span>
<div class="dropdown3"><span class="main-body-text">Refer section “Full Information’.</span>

</div>

CSS

.dropdown-link:hover {

    color: #09C

}

.dropdown-link {

    cursor: pointer;

    font-size: 13px;

    font-family:'robotolight', sans-serif;

    line-height: 20px;

    color: #039;

    -moz-transition-property: color;

    /* FF4+ */

    -moz-transition-duration: 500ms;

    -webkit-transition-property: color;

    /* Saf3.2+, Chrome */

    -webkit-transition-duration: 500ms;

    -o-transition-property: color;

    /* Opera 10.5+ */

    -o-transition-duration: 500ms;

    -ms-transition-property: color;

    /* IE10? */

    -ms-transition-duration: 500ms;

    transition-property: color;

    /* Standard */

    transition-duration: 500ms;

    text-decoration: none;

}

.dropdown-link-small:hover {

    color: #09c

}

.dropdown-link-small:active {

    color: #000

}

.dropdownconfig, .dropdown0, .dropdown1, .dropdown2, .dropdown3, .dropdown4, .dropdown5 {

    background-color: #FFFFFF;

    padding: 10px 10px 10px 10px;

    -webkit-box-shadow: 2px 2px 5px 1px #8C8C8C;

    box-shadow: 2px 2px 5px 1px #8C8C8C;

    margin-left: -10px;

    margin-top: 10px;

    margin-bottom: 30px;

    z-index: 999;

}

.dropdown0 {

    display: none;

}

.dropdown1 {

    display: none;

}

.dropdown2 {

    display: none;

}

.dropdown3 {

    display: none;

}

.dropdown4 {

    display: none;

}

.dropdown5 {

    display: none;

}

JavaScript

$(document).ready(function () {
    $(".dropdown-link#hover0").click(function () {
        $(".dropdown0").toggle("easeInOutQuint");
    });
    $(".dropdown-link#hover1").click(function () {
        $(".dropdown1").toggle("easeInOutQuint");
    });
    $(".dropdown-link#hover2").click(function () {
        $(".dropdown2").toggle("easeInOutQuint");
    });
    $(".dropdown-link#hover3").click(function () {
        $(".dropdown3").toggle("easeInOutQuint");
    });
});