Toggling the class of a div to show/hide content based on which button is clicked

Question

I am trying to show/hide a list of menu items based on which button is clicked for that particular category. Most Popular is seen by default/on page load. So for example when I click on the Appetizers button the page should go from this to this.

I am still very new to jQuery and JavaScript so I am having some difficulties getting this to work. Here is the HTML (condensed, just wanted to show what was seen in the screenshots and not all of the other menu items):

<div class="menu-container">
    <div class="menu-preview">
        <div class="menu-preview-items active">
            <h2>Most Popular</h2>
            <div class="menu-listing">
                <h3>California Roll (8 Pieces)</h3>
                <p>Imi crab, cucumber, avocado, and mayo with sesame</p>
                <p>$3.50</p>
            </div>
            <div class="menu-listing">
                <h3>Dynamite Roll (8 Pieces)</h3>
                <p>Two pieces prawn tempura, yam, cucumber, avocado, masago, letters, and mayo with sesame</p>
                <p>$4.95</p>
            </div>
        </div>
        <div class="menu-preview-items hidden">
            <h2>Appetizers</h2>
            <div class="menu-listing">
                <h3>Edamame</h3>
                <p>Boiled green soy bean with salt.</p>
                <p>$3.50</p>
            </div>
            <div class="menu-listing">
                <h3>Gomae</h3>
                <p>Blanched spinach with sesame seed and peanut sauce.</p>
                <p>$3.50</p>
            </div>
        </div>
    </div>
    <div class="menu-categories">
        <a href="#" class="menu-box">Most Popular</a>
        <a href="#" class="menu-box">Appetizers</a>
        <a href="#" class="menu-box">A La Carte</a>
        <a href="#" class="menu-box">BBQ</a>
        <a href="#" class="menu-box">Salad & Soup</a>
        <a href="#" class="menu-box">Tempura</a>
    </div>
</div>

Here is the CSS for the classes of .active and .hidden (as well as the container):

.active {
    display: none;
}

.hidden {
    display: contents;
}

.menu-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-evenly;
}

Here is the script that I have so far as well (which is placed at the very bottom of the document, just above the closing body tag):

$('.menu-box').click(function () {
    $('.menu-preview-items').toggleClass('.active');
    // alert('Hello!');
});

I will of course be adding more menu items for all the categories over time, I just wanted to try and get this to work before I commit to doing so. Should I be adding id's to anything? Do I need to add/edit any of my class names? Any help would be greatly appreciated!

Answer 1

You can try this:

change css

    .active {
display: block;
}

.hidden {
display: none;
}

.menu-container {
margin-top: 15px;
display: flex;
justify-content: space-evenly;
}

The html part

<div class="menu-container">

            <div class="menu-preview">
                <div class="menu-preview-items active most-popular">

                    <h2>Most Popular</h2>

                    <div class="menu-listing">
                        <h3>California Roll (8 Pieces)</h3>
                        <p>Imi crab, cucumber, avocado, and mayo with
                            sesame</p>
                        <p>$3.50</p>
                    </div>

                    <div class="menu-listing">
                        <h3>Dynamite Roll (8 Pieces)</h3>
                        <p>Two pieces prawn tempura, yam, cucumber,
                            avocado, masago, letters, and mayo with sesame</p>
                        <p>$4.95</p>
                    </div>

                </div>

                <div class="menu-preview-items hidden appetizers">

                    <h2>Appetizers</h2>

                    <div class="menu-listing">
                        <h3>Edamame</h3>
                        <p>Boiled green soy bean with salt.</p>
                        <p>$3.50</p>
                    </div>

                    <div class="menu-listing">
                        <h3>Gomae</h3>
                        <p>Blanched spinach with sesame seed and peanut sauce.</p>
                        <p>$3.50</p>
                    </div>

                </div>
            </div>

            <div class="menu-categories">
                <a href="#" class="menu-box" ref="most-popular">Most Popular</a>

                <a href="#" class="menu-box" ref="appetizers">Appetizers</a>

                <a href="#" class="menu-box">A La Carte</a>

                <a href="#" class="menu-box">BBQ</a>

                <a href="#" class="menu-box">Salad & Soup</a>

                <a href="#" class="menu-box">Tempura</a>

            </div>

        </div>

Now the JQuery

$('.menu-categories .menu-box').on('click',function(){
      $('.menu-preview-items').addClass('hidden');
      $('.menu-preview-items').removeClass('active');
      $('.'+$(this).attr('ref')).removeClass('hidden');
      $('.'+$(this).attr('ref')).addClass('active');
    });