Switch between three different classes

Question

Switch between three different classes

I need help with the flyout menu on my website usaletsgo.de. Specifically, I am looking to add a third page to the existing two pages in the red flyout located at the upper left corner of the site.

Currently, when switching between page 1 and page 2, list elements toggle between the css classes .visible and .hidden. The CSS code for this functionality is:

.visible{
display:block;
}

.hidden{
display:none;
}

The JS and HTML code snippet used for toggling list elements between visibility states is as follows:

<script>
function switch(){
$('.toggle').toggleClass('visible hidden');
};
</script>

<li class="toggle visible">Factory Butte </a></li>
... (list of other li elements)
<li class="toggle visible"> <a href="javascript:switch()">Page 2</a></li>
<li class="toggle hidden"> <a href="javascript:switch()">Page 1</a></li>

While this code may not be very advanced, it serves its purpose effectively. As a Javascript beginner, I am trying to figure out how to incorporate a third page into the existing functionality. Any suggestions or guidance would be appreciated!

javascript toggle

Answer 1

Answer №1

Check out this clever code snippet that showcases some neat tricks you can implement. One of the cool features is its ability to handle multiple menus seamlessly.

$(function() {
  var $uls = $("#menu ul"), len = $uls.length; 
  $("#menu a").on("click",function(e) {
    e.preventDefault(); // This link acts as a placeholder for cursor:pointer with a span element
    var vis = $(this).closest("ul").index()+1; // Identifying which UL the link belongs to
    if (vis>=len) vis=0;
    $uls.hide().eq(vis).show(); // Display the relevant UL
  }).eq(len-1).click(); // Click on the last link to show the first when loading
  $("#menu").show(); // Display the menu (prevents all elements from showing at once and then hiding)
});

#menu { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li>Factory Butte</li>
    <li>Moonscape Overlook</li>
    <li>Wedge Overlook</li>
    <li>Fantasy Canyon</li>
    <li>Hamburger Rocks</li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul>
    <li>Leprechaun Canyon</li>
    <li>Canyon X</li>
    <li>Paria Canyon</li>
    <li>Gold Butte NM</li>
    <li>Vermilion Cliffs NM</li>
    <li><a href="#">Page 3</a></li>
  </ul>
  <ul>
    <li>Bla Canyon</li>
    <li>Canyon Bla</li>
    <li>Paria bla</li>
    <li>Gold bla NM</li>
    <li>Bla Cliffs NM</li>
    <li><a href="#">Page 1</a></li>
  </ul>
</div>

Answer 2

Check out this clever code snippet that showcases some neat tricks you can implement. One of the cool features is its ability to handle multiple menus seamlessly.

$(function() {
  var $uls = $("#menu ul"), len = $uls.length; 
  $("#menu a").on("click",function(e) {
    e.preventDefault(); // This link acts as a placeholder for cursor:pointer with a span element
    var vis = $(this).closest("ul").index()+1; // Identifying which UL the link belongs to
    if (vis>=len) vis=0;
    $uls.hide().eq(vis).show(); // Display the relevant UL
  }).eq(len-1).click(); // Click on the last link to show the first when loading
  $("#menu").show(); // Display the menu (prevents all elements from showing at once and then hiding)
});

#menu { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li>Factory Butte</li>
    <li>Moonscape Overlook</li>
    <li>Wedge Overlook</li>
    <li>Fantasy Canyon</li>
    <li>Hamburger Rocks</li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul>
    <li>Leprechaun Canyon</li>
    <li>Canyon X</li>
    <li>Paria Canyon</li>
    <li>Gold Butte NM</li>
    <li>Vermilion Cliffs NM</li>
    <li><a href="#">Page 3</a></li>
  </ul>
  <ul>
    <li>Bla Canyon</li>
    <li>Canyon Bla</li>
    <li>Paria bla</li>
    <li>Gold bla NM</li>
    <li>Bla Cliffs NM</li>
    <li><a href="#">Page 1</a></li>
  </ul>
</div>

Answer 3

Answer №2

I appreciate all of your support.

Thanks to a friend's assistance, everything is now functioning smoothly.

Answer 4

I appreciate all of your support.

Thanks to a friend's assistance, everything is now functioning smoothly.

Switch between three different classes

Answer №1

Answer №2

Similar questions

Is there a way to retrieve data from Apollo-Server in nodeJs without relying on React?

I'm seeking assistance in enhancing this code within tb for extracting values using JavaScript

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

Attempting to develop a straightforward JavaScript presentation display

Participating in a scheduled Discord Voice chat session

Trouble with triggering HTML5 FileReader() functions

Using Javascript to create a radio button group

This code snippet, document.location.search.replace('?redirect=', '').replace('%2F', ''), is failing to execute properly in Firefox

Limiting the functionality of API's to be exclusively accessible within the confines of a web browser

Issues with form submission and JavaScript functionality have been detected in Internet Explorer, Firefox, and Safari, but are functioning properly in Chrome

Automatically inserting a row into an HTML table

How do I retrieve a nested object element based on the value of a specific field in Mongoose?

Easily transform arrays into objects by dynamically changing the keys

Accessing several values in Angular by clicking

Ways to ensure that text wraps to a new line when it exceeds the container's width

How can a Windows service interact with an Electron application?

Converting JSON object to a string

Is it possible to convert the pixel Array from canvas.getImageData() into base64 encoding?

display and conceal elements and refresh action

What is the best method for selecting the parent using jQuery?