Modifying the information displayed in a navigation panel or division using JavaScript

I am working on a navigation system that looks like this:

<nav class="subnav">
 <ul>
  <li><a href="a.html">This link leads to content A.</a></li>
  <li><a href="a.html">This link goes to content B.</a></li>
  <li><a href="a.html">This link directs to content C.</a></li>
 </ul>
</nav>

and another one that looks like this:

<nav class="subnav">
 <ul>
  <li><a href="1.html">This link takes you to content 1.</a></li>
  <li><a href="1.html">This link leads to content 2.</a></li>
  <li><a href="3.html">This link directs to content 3.</a></li>
 </ul>
</nav>

I am looking for a solution to implement a feature where the user can swap between these two subnav elements using an onclick event. If the user selects Alphabetical Group, the second subnav should be removed and the first one displayed. Conversely, if the user chooses Numerical Group, the first subnav should be replaced with the second.

In addition, there should be a default state set initially.

Any ideas on how I can achieve this functionality?

javascriptjqueryhtmlcss

Answer №1

Learn HTML Basics

<nav class="subnav" id="alphabetical">
 <ul>
  <li><a href="a.html">Click here for content A.</a></li>
  <li><a href="a.html">Click here for content B.</a></li>
  <li><a href="a.html">Click here for content C.</a></li>
 </ul>
</nav>

<nav class="subnav" id="numeric" style="display:none;">
 <ul>
  <li><a href="1.html">Click here for content 1.</a></li>
  <li><a href="1.html">Click here for content 2.</a></li>
  <li><a href="3.html">Click here for content 3.</a></li>
 </ul>
</nav>

<input type="button" id="one" value="Show Alphabetical" />
<input type="button" id="two" value="Show Numeric" />

JS:

$(document).ready(function(){
    $("#one").click(function(){
        $("#numeric").hide();
        $("#alphabetical").show();           
    });

    $("#two").click(function(){
        $("#alphabetical").hide();
        $("#numeric").show();           
    });
});

Check out the Demo

Answer №2

To make things simpler, you can assign a distinctive class to each of the ul elements:

<nav class="subnav alpha">
 <ul>
  <li><a href="a.html">Link to A</a></li>
  <li><a href="b.html">Link to B</a></li>
  <li><a href="c.html">Link to C</a></li>
 </ul>
</nav>

<nav class="subnav numeric">
 <ul>
  <li><a href="1.html">Link to 1</a></li>
  <li><a href="2.html">Link to 2</a></li>
  <li><a href="3.html">Link to 3</a></li>
 </ul>
</nav>

Next, in your JavaScript/jQuery:

$('.subnav').on('click', function(e){
  var $element = $(e.target);
  $element.hide();
  if($element.hasClass('numeric')) {
    $('.alpha').show();
  }
  else {
    $('.numeric').show();
  }
});

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

Unraveling a date field from JSON with AngularJS filtering

Extracting data from JSON file shows /Date(1435837792000+0000)/ How can I format the date to appear as Oct 29, 2010 9:10:23 AM? ...

javascriptjsonangularjs

Failure of event watcher on dynamically updated content

Any help would be greatly appreciated! :) I am currently using JavaScript to dynamically add fields to a document, but I have noticed that the event listener only works on predefined fields. For instance, in the code snippet below, the 'lozfield&apo ...

javascripthtmljqueryinput

The functionality of app.get('') is malfunctioning in Node.js when it comes to handling query parameters

I'm currently working on updating my conversation application to handle new routes that accept parameters and pass them along to the client side. However, I'm facing an issue with the .get() method not rendering the HTML as expected. 'use s ...

javascriptnode.js

The simultaneous use of trackball controls and GUI is not compatible

When I click on them, the GUI changes together and I have looked at other answers. However, I am not sure where to put the listener. I tried putting the listener in render(), but it still doesn't work. How can I fix my code? This coding is related to ...

javascriptthree.js

Tips for implementing a Material-UI TextField component without the background-color spilling over the border

Ensuring a Material-UI TextField is styled with a background-color on hover or focus has been a challenging task for me. The code snippet for my component is shown below: import React from "react"; import TextField, { TextFieldProps } from " ...

cssmaterial-uibordertextfieldbackground-color

Is there a way to include the request body (req.body) in the msg object using express-winston?

My current challenge involves logging {{ req.body }} using the msg: object in express-winston. Even after whitelisting the body with expressWinston.requestWhitelist.push('body');, it still does not appear in the log. export const accessLogger = ...

javascriptnode.jstypescriptexpresswinston

What is preventing me from binding ng-click to my element?

I've encountered an issue where the ng-click event is not activating on my element. Despite using the in-line controller script as shown below, I am unable to trigger my alert. Are there any integration issues that I should be mindful of? What could p ...

javascriptjqueryhtmlangularjsangularjs-directive

Launching a Popup in ASP.NET followed by a Redirect

I have a unique custom CSS/HTML popup lightbox along with a form that contains a button. My objective is, upon clicking the button: to open the popup followed by using Thread.Sleep and finally carry out a Response.Redirect to a different page. Do you th ...

asp.nethtmlcss

Transforming a Shadertoy experiment into a customized Three.js playground on my local machine

I am currently working on a local shader sandbox project inspired by a Shadertoy created by lennyjpg. I have been referencing two Stack Overflow questions and answers (one, two) for help. The goal is to convert the Shadertoy code to use Three.js for a larg ...

javascriptthree.jsglslshader

Is it possible to automatically play a sound clip when the page loads?

Is there a way to automatically play a sound clip when my page loads? Are there any specific JavaScript or jQuery methods I can use for this, as I am developing my page using PHP. ...

javascripthtmlaudio

Surprising discovery of the reserved term 'await'

function retrieveUsers() { setTimeout(() => { displayLoadingMessage(); const response = fetch("https://reqres.in/api/users?page=1"); let userData = (await response.json()).data; storeAllUserDa ...

javascriptreactjs

Implement code to execute exclusively on the initial success of react-query

I have a unique scenario where I need to utilize standard useQuery behavior, while also executing a piece of code only on the initial onSuccess event. Although I understand that I can accomplish this using useRef, I am curious if there is an alternative a ...

javascriptreactjstypescriptreact-query

Preserving State in React Router Through Page Reload

I recently set up a react router in order to display my Navbar on all routes except the login page. To achieve this, I created a Layout component that ensures users are redirected back to the Login page if they are not authenticated. Currently, I'm st ...

javascriptreactjsreact-router

Create a pair of variables by utilizing the split function

I have a string that looks like this test/something/else My goal is to create two separate variables: first = test second = something/else I attempted to achieve this using the following code snippet: const [first, ...second] = "test/something/else& ...

javascript

What could be causing the favicon in my Next.js application to not function properly?

My favicon doesn't seem to be working properly. I've saved the favicon file as favicon.ico in the /public directory and have included a reference to it in the <Head> section of my pages (which are located in the /pages directory), but it s ...

htmlreactjsnext.jsfaviconvercel

Detecting when a slide-in menu or its child element loses focus while tab navigating with jQuery

Hey there, I'm on the lookout for a way to automatically close a slide-in menu when using keyboard navigation (like tabs or arrow keys). Opening the menu and finding my way around is working fine. However, I need to be able to detect when focus is lo ...

jqueryfocusaccessibilitylost-focus

Automatically adjust CSS grid to fill based on the width of child elements

Can a CSS grid adjust its widths dynamically based on the content of its children? I believe not, but I wanted to confirm. I attempted this approach without success. const Grid = styled.div` display: grid; grid-auto-flow: row; grid-template-columns ...

csscss-gridstyled-components

Learning how to extract data from XML and insert it into HTML using JavaScript (Novice)

--Simplified Code Update-- I'm in a bit of a tricky situation here. According to w3schools, my code should be functioning properly, but for some reason, it's just not working as expected. Here's the code for my JavaScript. XHTML <!DOCT ...

javascripthtmlxmlajax

Mysterious CSS Margin/Padding Issue

I am currently tackling a small project and have come across an issue. In the bgContainer class, there are two text elements with space between them, but I want to remove this spacing and I can't figure out where it's coming from. Chrome indicate ...

htmlcsstwitter-bootstrapbootstrap-4

Struggling to implement Ajax functionality with JSF on a Tomcat 7.0 server

I am new to Ajax and struggling to get a simple example to work... Here is the javascript code: var xmlRequest; function refreshContent() { if (window.XMLHttpRequest) { xmlRequest = new XMLHttpRequest(); } else { x ...

javascriptajaxjsf