jQuery dropdown nav

dropdown nav demo

by neohekate

HTML

<div id="skeleton">
        <div id="one">
            <div class="holder">
                <div class="name">
                    TITLE ONE
                </div>
                <div class="content">
                    content 1
                </div>
            </div>
        </div>
        <div id="two">
            <div class="holder">
                <div class="name">
                    TITLE TWO
                </div>
                <div class="content" style="margin: 0;">
                        <p style="background-color: red; padding: 0; margin: 0;">
                            content 2
                        </p>
                        <p style="background-color: orange; padding: 0; margin: 0;">
                            content 2.2
                        </p>
                        <p style="background-color: yellow; padding: 0; margin: 0;">
                            content 2.4
                        </p>
                        <p style="background-color: green; padding: 0; margin: 0;">
                            content 2.6
                        </p>
                        <p style="background-color: blue; padding: 0; margin: 0;">
                            content 2.8
                        </p>
                        <p style="background-color: violet; padding: 0; margin: 0;">
                            content ~2.99
                        </p>
                </div>
            </div>
        </div>
        <div id="three">
            <div class="holder">
                <div class="name">
                    TITLE THREE
                </div>
                <div class="content">
                    content 3
                </div>
            </div>
        </div>
        <div id="four">
            <div class="holder">
                <div class="name">
                    TITLE FOUR
                </div>
                <div class="content">
                    content 4
                </div>
            </div>
   ...

CSS

* {
            margin: 0;
        }

        .content { /* styling for nav contents */
            display: none; /* makes nav contents invisible by default DONT touch */
            background-color: coral;
        }
        #skeleton { /* styling for nav holder, thus a skeleton :-D */
            height: 40px; /* Adjust depending on desired nav height */
            width: 100%;
            display: flex; /* Makes nav contents stand side by side, also dont touch */
            background-color: black;
        }
        .name { /* styling for nav contents */
            color: white;
            height: 30px;
            width: 100px;
            padding: 5px;
        }

JavaScript

$('.holder').hover( function () { //To make a CLICKABLE nav header, change '.hover' to '.click'
                $(this).find('.name').css('color', 'green'); //Text color on hover. For no change, remove this line
                if($(this).find('.content').is(":visible")){
                $(this).find('.content').hide();
                $(this).find('.name').css('color', 'white'); //Text color on content fade. For no change, remove this line
         } else{ 
             $(this).find('.content').slideDown(500); //For no transitions, remove this line
              $(this).find('.content').show();
         }
            });