JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul>
    <li>
        <div class="heading">	<a>Menu 1</a>

        </div>
        <div class="content">
            <ul>
                	<h2>Top Ten Questions</h2>

                <li>	<a href="">How to reach us</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>	<a href="">How to email us</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>	<a href="">Contact Number</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">	<a>Menu 2</a>

        </div>
        <div class="content hide">
            <ul>
                	<h2>Products</h2>

                <li>	<a href="">Tabels</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>	<a href="">Ladders</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>	<a href="">Chairs</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">	<a>Menu 3</a>

        </div>
        <div class="content hide">
            <ul>
                	<h2>Our Team</h2>

                <li>	<a href="">People</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>	<a href="">Managament</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>	<a href="">Locations</a>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
   ...

CSS

.heading {
    color: white;
    font-weight: bold;
    padding: 15px 0 15px 20px;
    background: grey;
    width: 100%;
}
.hide {
    display: none;
}
@media (min-width: 700px) {

    ul{
        position:relative;    
        list-style:none;
        padding-left:0;
    }
    h2{
        margin-top:0;
    }
    .heading {
        float: left;
        width: 35%;
        clear: both;
    }
    .content {
        position:absolute;
        left: 38%;
        width: 65%; 
        top:0;
        padding-top: 10px;
        padding-left: 10px;
    }
}

JavaScript

$(".heading").click(function () {
    var $this = $(this);
    $this.next(".content").show(400);
    $this.parent().siblings().children().next().hide();
    return false;
});