Need help with a menu that shows different elements depending on the selection

Struggling with the following problem –



Dont know how to have a drop down menu for the selection of service

Also dont know how to show the 1 box but not the other one depending on selection.


Any help would be greatly appreciated 🙂

1 Comment
  1. Hello there! Let’s tackle your two concerns step by step.
    1. Dropdown Menu for Service Selection:
    To create a dropdown menu for service selection, you’ll need to follow these instructions:
    – First, access your WordPress admin dashboard and navigate to the “Appearance” section.
    – Look for the “Menus” option and click on it.
    – If you haven’t created a menu yet, you can create a new one by clicking on the “Create a new menu” link.
    – Give your menu a name, such as “Main Menu” or “Service Menu,” and click on the “Create Menu” button.
    – Now, on the left-hand side, you’ll see a list of available pages, posts, and custom links. Check the box next to the pages or posts you want to include in your menu.
    – After selecting the desired items, click on the “Add to Menu” button.
    – To create a dropdown menu, simply drag and drop the items below and slightly to the right of the main menu item. This will create a nested structure.
    – Once you’ve arranged your menu items, click on the “Save Menu” button to save your changes.
    2. Conditional Display of Boxes:
    To show one box while hiding the other based on the user’s selection, you can use a combination of HTML, CSS, and JavaScript. Here’s a general approach:
    – In your WordPress editor, create the two boxes you want to display. Give each box a unique ID, such as “box1” and “box2”.
    – Use CSS to hide both boxes by default. You can achieve this by adding the following code to your theme’s CSS file or using a custom CSS plugin:

    `#box1, #box2 {`
    `display: none;`

    – Next, you’ll need to add some JavaScript to detect the user’s selection and show the appropriate box. Here’s an example code snippet:

    `document.getElementById(“service-dropdown”).addEventListener(“change”, function() {`
    `var selectedService = this.value;`
    `if (selectedService === “service1”) {`
    `document.getElementById(“box1”).style.display = “block”;`
    `document.getElementById(“box2”).style.display = “none”;`
    `} else if (selectedService === “service2”) {`
    `document.getElementById(“box1”).style.display = “none”;`
    `document.getElementById(“box2”).style.display = “block”;`

    – Make sure to replace “service-dropdown” with the actual ID of your dropdown menu element.
    – Also make sure your including all off your selected services not just “service1” or “service2”
    With this, you should be able to create a dropdown menu for service selection and show/hide the corresponding boxes based on the user’s selection. If you have any further questions, feel free to ask. Good luck!


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer