JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="search-content-wrap">
    <div id="search-list-wrap">
        <ul>
            <li><a id "" class="list-title" href="#">Products <img src="http://fb.dsm.pw/assets/img/images/placeholder.jpg" width="40" height="40" alt="arrow"/> </a>

                <ul>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li><a id "" class="list-title" href="#">Products <img src="http://fb.dsm.pw/assets/img/images/placeholder.jpg" width="40" height="40" alt="arrow"/> </a>

                <ul>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a href="#">List Item</a>

                    </li>
                    <li><a...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    display: block;
    border: 1px solid #ccc;
    border-radius:2px;
}
*:link, *:visited, *:focus {
    text-decoration: none;
    color: #0067b1;
    border: 0;
    outline-offset: 0px;
    display: inline-block;
}
a {
    display: block;
    padding:8px;
}
.list-title {
    border-left:8px solid #0091ce;
    display: block;
    overflow:hidden;
    position:relative;
}
.list-title img{
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #ccc;
}
li ul {
    display: none;
}

JavaScript

jQuery('.list-title').click(function () {
    jQuery(this).siblings('ul').slideToggle();
});