Tips for referencing a specific section of a URL within WordPress

Currently, I am in the process of developing a website page with tab-like options. Using buttons and sections of Elementor, I have successfully created the functionality where clicking on each button displays a corresponding section.

Now, my goal is to allow these sections to be accessible through the navigation bar as well. To achieve this, I need to assign specific URLs to each section. For example, when selecting Section 2 from the navigation, the page will reload, the URL will change, and Section 2 will be displayed.

You can view the live page by clicking here.

Below is the JavaScript code that enables the appearance of each section upon button click:

var divs
var btn11 = document.getElementById("btn11");
...
// The rest of the JavaScript code remains unchanged
...
.elementor-editor-active .hidden {
  display: block;
}

.hidden {
  display: none;
}

.shown {
  display: block !important;
}

Answer №1

Recommendations

  1. Include the ID of the item to display as a data-attribute in the button

    id="btn11" data-id="sect11" class="toggleButton"
    
  2. Utilize event delegation starting from the nearest container, for instance

    const container = document.querySelector('.elementor-container');
    const toggleButtons = [...container.querySelectorAll('toggleButton')];
    container.addEventListener('click',function(e) {
      const tgt = e.target.closest('.elementor-widget-wrap').querySelector("[data-id]"); // locate the button of the widget that was clicked
      if (tgt && tgt.classList.contains('toggleButton')) {
        let idx = 0;
        toggleButtons.forEach((btn,i) => {
          const div = document.getElementById('#'+btn.dataset.id).classList.toggle('shown', btn===tgt);
          if (btn === tgt) idx = i;
        })
        // Unsure about this code, but feel free to try it out
        if (idx < toggleButtons.length-1) document.getElementById("next-btn").textContent = toggleButtons[idx+1].textContent;
      }
    })
    

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to locate an element using regex in Python while using Selenium?

Is it possible to interact with a dynamically generated dropdown list using Selenium if I only know the phrase present in its id or class name? Can Selenium locate an element using regex and click on it accordingly? ...

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

The issue of "TypeError: e.fixers is undefined error for prefixfree on dynamically loaded iframes" is arising

My iframe is loaded dynamically with code to run inside it - it's a code playground with a codemirror instance below. One of the pieces of code that runs in the iframe is the prefixfree.min.js from Lea Verou. When the iframe loads or unloads, I encou ...

Tips for interpreting a JSON object that has been returned

I'm currently working on creating a notification system. The process involves running an AJAX call that executes a PHP script to select all 'message' items where 'new=1'. The PHP array is then returned to the JavaScript function vi ...

Executing an AngularJS function within a form element using the ng-submit directive

I have created an AngularJS function that I intend to call in my form tag. However, when I use this function in my html form within the ng-submit attribute, it does not redirect or perform any action. When I click on the button, nothing seems to happen a ...

column-break-inside: prohibited; // ineffective

I'm trying to format my text into two columns while maintaining control over where the column breaks occur. Here is the CSS code I am using: body { } #content { column-count: 2; } #left_col { break-inside:avoid-column; } #ri ...

Using Node.js to read from a file and write the character 'Ł' to another file

I am facing an issue with an ANSI file that contains the character 'Ł'. My goal is to extract this character and save it to another file while preserving the same encoding to retain the 'Ł' character. const fs = require('fs&apos ...

Javascript generates a mapping of values contained within an array

In my current project, I am developing a feature that allows users to create customizable email templates with placeholder tags for content. These tags are structured like [FirstName] [LastName]. My goal is to brainstorm the most effective method for crea ...

Clicking on components that are stacked on top of each

I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...

Encountering a Navigation Problem with Fullpage.js

Check out this example on CodePen In this scenario, when setting the following values in fullpage: bigSectionsDestination: ".section", normalScrollElements: '.section', new fullpage('#fullpage', { sectionsColor: ['yellow& ...

Is there a way to verify duplicate email addresses without the need to click any button?

As I work on developing a web application, I am faced with the challenge of checking for duplicate email addresses in real-time without the need to press a button. This check must be done by comparing the data with information stored in the database. Since ...

What is the method for extracting the value of a JavaScript variable using the .Net framework or C# programming language?

Looking at the code snippet below, I am trying to extract the values of title and videoId. These elements are part of the session, which is nested within units. I am unsure how to retrieve their values using C# or the .Net framework. Can anyone help m ...

Positioning of textarea in CSS

As a CSS beginner, I am struggling to position the textarea on the right and the map on the left without the box covering the map. Here is the CSS I currently have: #CoordData { font-family: Arial, Helvetica, sans-serif; font-size: .9em; // pos ...

Construction of jQuery Events

I have experience working with jquery tools and recently started exploring the twitter bootstrap src. One interesting thing I've observed is the utilization of the $.Event constructor for event triggering. For example, in cases like the bootstrap mo ...

Height of cells is often overlooked in webkit browsers

When adjusting tbody and thead heights, I noticed that webkit does not behave like other browsers. I've set the height of td. Here is an example of what I am referring to: link The question at hand is - which browser is displaying correctly? And ho ...

MANDATORY activation of CONFIRMATION

Hello everyone, I'm seeking assistance with my code. Below is the form code I need help with: <form action="input.php" method="POST"> <input type="text" class="input" name="firstname" placeholder="First Name" required> <input t ...

Creating a custom date format in JavaScript can easily be achieved

Need assistance with generating date in a specific format using javascript. The desired format is "2017-12-07T14:47:00+0530". I attempted to use the moments library but encountered an issue with the time zone field. moment().format('YYYY-MM-DDTHH:mm: ...

Is there a way to extract the data from a UIWebView?

Is there a way to extract the first paragraph of each page from a UIWebView? I'm currently struggling with this task. I've tried using a regular expression for detection, but unfortunately it's returning the paragraph class name instead of ...

Align text to the right and left side

HTML file: <div id="home"> <b><p class="split-para">java<br><a href="j_temp.html" class="float">temperature converter in terminal</a> <br> <a href="j_palindrom.html" class="float">palindrome checker</a& ...