JSFiddle - React, Tailwind, and code Playground

by photo_tom

HTML

<div class="menu-mobiel-container"><ul id="menu-mobiel" class="menu"><li id="menu-item-2265" class="menu-item menu-item-type-post_type menu-item-2265"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/">Restaurant</a>
    <ul style="display: none;" class="sub-menu">
        <li id="menu-item-2262" class="menu-item menu-item-type-post_type menu-item-2262"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/grill/">Grill</a>
            <ul style="display: none;" class="sub-menu">
                <li id="menu-item-2190" class="menu-item menu-item-type-post_type menu-item-2190"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/grill/vleesgourmet/">Vleesgourmet</a></li>
                <li id="menu-item-2254" class="menu-item menu-item-type-post_type menu-item-2254"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/grill/steengrill/">Steengrill</a></li>
            </ul>
        </li>
        <li id="menu-item-2263" class="menu-item menu-item-type-post_type menu-item-2263"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/buffet/">Buffet</a>
            <ul style="display: none;" class="sub-menu">
                <li id="menu-item-2246" class="menu-item menu-item-type-post_type menu-item-2246"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/buffet/koffietafel/">Koffietafel</a></li>
                <li id="menu-item-2247" class="menu-item menu-item-type-post_type menu-item-2247"><a class="plus" href="http://www.jfvandekamp.nl/dragt/restaurant/buffet/brunch-buffet/">Brunch buffet</a></li>
            </ul>
        </li>
    </ul>
    </li>
    <li id="menu-item-2178" class="menu-item menu-item-type-post_type menu-item-2178"><a class="plus" href="http://www.jfvandekamp.nl/dragt/kids/">Kids</a>
        <ul style="display: none;" class="sub-menu">
            <li id="menu-item-2264" class="menu-item menu-item-type-post_type menu-item-2264"><a class="plus"...

CSS

ul#menu-mobiel{
    list-style-type:none;
    margin: 0;
    padding: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-background-clip: padding-box;
    border: 2px solid #D3E2E9;
    background-color:#fff;
}

ul#menu-mobiel ul{
    background-color:#FFF;
}

ul#menu-mobiel a {
    display: block;
    text-decoration: none;
    border-top:1px solid #D3E2E9;
}

ul#menu-mobiel li {
    margin: 1px;
    
}

ul#menu-mobiel li a {
    color: #000;    
    padding: 0.5em;
    background: url(images/bg.jpg) repeat-x;
}

ul#menu-mobiel li a:hover {
    background: url(images/bg2.png) repeat-x;
    color:#ccc;
    font-weight:bold;
}

ul#menu-mobiel li ul li{
    background:none;
}        

ul#menu-mobiel li ul li a {
    color: #000;
    padding-left: 20px;
    border:none;
    background:none;
}

ul#menu-mobiel li ul li a:hover {
    background: #fff;
    border-left: 15px #D3E2E9 solid;
    padding-left: 15px;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }

li span,a span{
    margin-top:-2px;
    text-align:center;
    float:right;
    font-size:20px;
    width:15px;

JavaScript

function initMenu() {
    $('#menu-mobiel ul').hide();

    $.each($('#menu-mobiel>li'), function(i, value) {
        var $this = $(this);

        if ($this.has('ul').children('a').length >= 1) {
            $this.find('a').append("<span>+ </span>").addClass('plus').click(function() {
                togglePlus($(this));
                $(this).next('.sub-menu').slideToggle('normal');
                return false;
            });
        }
        else {
            $this.find('a').append("<span class='pijltje'> > </span>");
        }
    })


    function togglePlus(element) {
        element = $(element);
        if (element.hasClass('plus')) {
            element.removeClass('plus').addClass('minus');
            element.children('span').text('- ');
        } else {
            element.removeClass('minus').addClass('plus');
            element.children('span').text('+ ');
        }
    }

}

$(document).ready(function() {
    initMenu();
});