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');
    });

Answer 2

You can have this done with JavaScript. Set the elements you want to show and hide by giving each and id. In your JavaScript file, set those elements to what you want when the event to trigger this is clicked. There are different ways to go about this. You can use pure JavaScript by doing: document. getElementById('name of id').remove() or use the CSS, document. getElementById('name of id').style.display = 'none' or 'block' based on displaying the elements or hiding the elements.

If you have further questions, do not hesitate to ask

Answer 3

You are missing some way of linking the menu container click to the menu contents.

You will need to add ids to every div that has the menu-listing class.

Each of your menu-box links need to somehow know which menu-listing to activate. You also need to de-activate all of the other menu-listing s.

I'd recommend using data-* attributes . These allow you to add attributes to any DOM element. In this case, you'd add a data attribute to your menu-box links that reference the menu-listing you care about. It would look something like this:

The menu listing:

<div id="most-popular" class="menu-preview">
  ...
</div>

The menu box:

<a href="#" class="menu-box" data-menu-listing="most-popular">Most Popular</a>

And finally, the jquery:

$('.menu-box').click(e => {
  let id = e.target.data('menu-listing');
  // first remove the class from all items
  $('.menu-preview-items').removeClass('.active');
  // now add back the active class for the item we care about
  $(`#${id}`).addClass('.active');
});

Answer 4

You could user the .hide() and .show() functions in jQuery if you would prefer:

 $(document).ready(function () { $("#item2").hide(); $("#item3").hide(); $("#item4").hide(); }); function showItem(id) { // Hide all of the items $('.items').hide(); itemId = "item" + id; $("#" + itemId).show(); }; 

 .container { display: flex; flex-direction: row; justify-content: space-between; } .buttons-container { display: flex; flex-direction: row; justify-content: space-between; width: 300px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="items-container"> <p id="item1" class="items">Item1</p> <p id="item2" class="items">Item2</p> <p id="item3" class="items">Item3</p> <p id="item4" class="items">Item4</p> </div> <div class="buttons-container"> <a id="btn1" href="#" onclick="showItem(1)">Btn1</a> <a id="btn2" href="#" onclick="showItem(2)">Btn2</a> <a id="btn3" href="#" onclick="showItem(3)">Btn3</a> <a id="btn4" href="#" onclick="showItem(4)">Btn4</a> </div> </div> 

What this code does it hides all but the first item on document.ready (You could just set these to your hidden class). Then when you click on an item it hides all items with the class items and then shows the item corresponding with the button you clicked.