Vertical Buttons Navigation in Elementor (JS)

This guide explains how to build a layout with vertical buttons on the left that show and hide corresponding content sections on the right, without using the default Tabs widget. This gives you maximum design freedom.

Final Result Preview

Here is what we’ll be building: A set of distinct, styled buttons in the left column that control which content section is visible in the right column.

Step 1: Create the Two-Column Layout

  1. Add a new Section to your page.
  2. In the Layout tab for that section, select the two-column structure.
  3. Adjust the column widths as needed. A good starting point is 30% for the left column (buttons) and 70% for the right column (content).

Step 2: Add Your Buttons (Left Column)

  1. Drag a Button widget into the left column.
  2. Style the first button exactly how you want it to look. Adjust typography, colors, padding, border radius, etc.
  3. Once you are happy with the design, right-click the button and Duplicate it for as many content panels as you need.
  4. Update the Text for each button (e.g., “Service 1”, “Service 2”, “About Us”).

Step 3: Configure Each Button

This is the most critical step. We need to tell each button which content section it should control.

  1. Select the first button. Go to the Advanced tab.
  2. In the CSS Classes field, add a class: content-switcher-btn
  3. In the Link field on the Content tab, type #content-1
  4. Repeat this for all other buttons, giving them all the same content-switcher-btn class but changing the link to correspond to a unique content ID:
    • Button 2 Link: #content-2
    • Button 3 Link: #content-3
    • …and so on.

Step 4: Create the Content Sections (Right Column)

  1. In the right column, drag in a Section widget (this is called an Inner Section when placed inside another section). This will be your first content panel.
  2. Add any content you want to this Inner Section (headings, images, text, etc.).
  3. Select the Inner Section itself. Go to its Advanced tab.
  4. In the CSS ID field, give it the ID you linked to from your first button: content-1
  5. In the CSS Classes field, give it a class: content-panel
  6. Now, duplicate this Inner Section for each of your buttons.
  7. For each duplicated Inner Section, change its CSS ID to match the corresponding button link (content-2, content-3, etc.) but keep the CSS Classes as content-panel.

Step 5: Add the Custom Code

This code will handle the logic of showing and hiding the content panels.

  1. Go to your WordPress dashboard > Elementor > Custom Code. Click “Add New”.
  2. Give your code a title (e.g., “Vertical Content Switcher”).
  3. Set the Location to </body> - End.
  4. Paste the following code into the code box.
<style>
/* Hide all content panels by default */
.content-panel {
  display: none;
}

/* Show the first panel by default */
#content-1 {
  display: block;
}

/* Style for the active button */
.content-switcher-btn.active-btn {
  background-color: #6a63e4 !important; /* Active color */
  color: #ffffff !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Find all the switcher buttons
    const switcherButtons = document.querySelectorAll('.content-switcher-btn .elementor-button-link');
    
    // Find all the content panels
    const contentPanels = document.querySelectorAll('.content-panel');

    // Function to handle the switch
    function switchContent(targetId) {
        // Hide all panels
        contentPanels.forEach(panel => {
            panel.style.display = 'none';
        });

        // Show the target panel
        const targetPanel = document.querySelector(targetId);
        if (targetPanel) {
            targetPanel.style.display = 'block';
        }

        // Update active state on buttons
        switcherButtons.forEach(button => {
            if (button.getAttribute('href') === targetId) {
                button.closest('.elementor-widget-button').classList.add('active-btn');
            } else {
                button.closest('.elementor-widget-button').classList.remove('active-btn');
            }
        });
    }

    // Set the first button as active by default
    if (switcherButtons.length > 0) {
        switcherButtons[0].closest('.elementor-widget-button').classList.add('active-btn');
    }

    // Add click event listeners to each button
    switcherButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent page from jumping to the anchor
            const targetId = this.getAttribute('href');
            switchContent(targetId);
        });
    });
});
</script>
  1. Click Publish. Make sure to set the condition to “Entire Site” or the specific page you are working on.

That’s it! When you view the page, your buttons will now control the visibility of your content sections, giving you a fully custom and professional-looking interactive element.