Tips for using jQuery dropdown menus

I am currently in the process of creating a prototype for a quick dropdown menu using jQuery. However, I have reached the limits of my knowledge on jQuery and could use some assistance in solving my issue.

My objective is to have a dropdown animate down when a user hovers over a link, and when another link is clicked, the next dropdown will animate over the top, and so on.

Below is the HTML code:

    <div class="wrapper">
        <div class="dropdowns">
            <ul>
                <li class="call"><a href="#">Call</a></li>
                <li class="chat"><a href="#">Chat</a></li>
                <li class="message"><a href="#">Send a message</a></li>
            </ul>
        </div>
        <div class="slide call-panel">
            <h1>Call now</h1>
        </div>
        <div class="slide chat-panel">
            <h1>Online chat</h1>
        </div>
        <div class="slide message-panel">
            <h1>Send us a message</h1>
        </div>
    </div>

CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.dropdowns {
    overflow: hidden;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}

.call a {
    background: #f1f1f1;
}

.chat a {
    background: #e1e1e1;
}

.message a {
    background: #f1f1f1;
}

a {
    display: block;
    width: 33.333%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
}

.call-panel {
    height: 300px;
    background: darkgrey;
    display: none;
}

.chat-panel {
    height: 300px;
    background: darkgrey;
    display: none;
}

.message-panel {
    height: 300px;
    background: darkgrey;
    display: none;
}

h1 {
    margin: 0;
    padding: 0;
}

JS:

$( ".call a" ).click(function() {
  toggleSlides( ".call-panel" );
});

$( ".chat a" ).click(function() {
  toggleSlides( ".chat-panel" );
});

$( ".message a" ).click(function() {
  toggleSlides( ".message-panel" );
});

function toggleSlides(slide){
    $(".slide").slideUp ( "slow", function(){
        $(slide).slideDown( "slow" );
    } );
}

I have created a fiddle showcasing my current progress, but it seems to be having issues with animations. Any help would be greatly appreciated!

Link: http://jsfiddle.net/2zwjZ/

Answer №1

To achieve this functionality, utilize jQuery as shown below: this.hash;

$('.dropdowns li a').removeClass('active');
$('.dropdowns li a').click(function(){
   var tabDiv = this.hash;
    $('.slide').hide();
    $(this).addClass('active');
   $(tabDiv).slideDown();
    return false;
});

View updated jsFiddle demo

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

Having trouble understanding why adding raw HTML is yielding different results compared to generating HTML using jQuery

I need assistance with two jsFiddles: http://jsfiddle.net/kRyhw/3/ http://jsfiddle.net/kBMSa/1/ In the first jsFiddle, there is code that adds HTML to my ul element, including an 'X' icon in SVG format. Attempting to recreate this functionali ...

Generating a Personalized XML Format Using Information from a Single MySQL Table Row by Row

If anyone can assist with this, I would greatly appreciate it: <warehouse> <frontbay> </frontbay> <bayrow> <bay> </bay> <bay> ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

Creating an HTML slideshow banner: What you need to know

I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...

"Create a set of arrays within an object that are duplicates four times, and then dynamically manipulate the first item within each array

Here is the layout of my array object: const foo = {"data":[ [1,'asdf'], [2,'lorem'], [3,'impsum'], [4,'test'], [5,'omg'], ]} I am looking to replicate each array four times and increment the first item ...

Responsive CSS images with overlays

I need to stack two images on top of each other while ensuring they remain responsive with a percentage width and height. <div class="container"> <img src="res/bigger.png/> <img src="res/smaller.png class="icon"/> </div> ...

What is the best approach for running a database query using the value selected from a form dropdown?

Currently, my application server is ColdFusion and I am using SQL Server for the database. Within a select form element on my webpage, users can choose from a list of vehicles such as Volvo S60, BMW M6, and VW Jetta. Once a user selects a vehicle, I need ...

Utilizing `v-model` on a component that contains `<script setup>` in Nuxt can cause issues with the standard `<script>` tags

Working on a Nuxt3 project, I have implemented v-model on a component. Following the guidance from Vue documentation, here is how it should be done: In the parent component: <MyInput v-model="myData" placeholder="My placeholder" /&g ...

Which is the optimal choice: subscribing from within a subscription or incorporating rxjs concat with tap?

After storing data in the backend, I proceed to retrieve all reserved data for that specific item. It is crucial that the data retrieval happens only after the reservation process to ensure its inclusion. Presented with two possible solutions, I am cont ...

Converting User Input Special Characters to HTML5 data-attributes with URL Encoding/Decoding

Seeking assistance from the experts on my first question here at stackoverflow. Our web application allows users to input escape/special characters, and we are conducting testing for extreme scenarios. I have successfully passed escape characters through a ...

Jspsych: Centering and aligning 3 p tags to the left on the page

Feeling pretty stuck at the moment. Here's what I have visually right now: https://i.sstatic.net/FUzgM.png I added a caption in Comic Sans and an arrow using MS Paint. Each line with color swatches is wrapped in a p tag. The goal is to center thes ...

Struggling to remove a row from the MUI DataGrid within a MERN CRUD application with Redux/RTK?

Struggling to understand why the delete button isn't working on my Material UI (MUI V5) Data Grid table. As a beginner in coding, especially with MERN and Redux, my mind is overwhelmed after trying various solutions all weekend - Google, Stack Overflo ...

The issue of onClick failing to function when paired with the addEventListener for the

Looking into a react component for a profile button that opens a menu with three options: My Profile, Settings, and Logout. The issue seems to be with the onClick event on the a tags not working as expected (the console.log is not being printed). Interes ...

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

Disabling a button until a selection is made in a combobox using Angular

I am currently working on a template that includes a combobox, a button, and a table. What I am trying to achieve is to make the buttons unclickable unless a value is selected from the combobox. After selecting a value, the button will call a service metho ...

Utilize npm to incorporate external JavaScript libraries into Meteor 1.3

Trying to integrate the OpenSeadragon library into my Meteor app has been a bit challenging. After successfully installing it via npm using meteor npm install openseadragon, I found that the OpenSeadragon docs only offer an example using the script tag. T ...

Retrieve the chosen item from the autocomplete feature

Unfortunately, I have encountered an issue with this solution as I was unable to get it to work correctly in my code. The objective is to retrieve the selected item and then call another function to utilize it. The script is as follows: <script type=" ...

Encountering MIME type error (text/html) during Angular project deployment

I am facing an issue while trying to deploy a project built with Angular/CLI 6.12.0. After transferring the content of the "dist" folder to a server, I encountered a console error related to MIME type. The module at address "http://www.sylvainallain.fr/p ...

Effect on Label in WordPress Contact Form 7 When Input Field is Populated

Currently, I am attempting to achieve the floating label effect on Contact Form 7 and have encountered an issue. Although I have successfully implemented the label effect on input:focus, I am struggling to make it persist once text has been entered and foc ...

Error in Node.js: The res.send method is undefined

I'm having some issues with my first attempt at creating a simple Counter Strike API bot using nodeJS. The problem lies with the res.send function, as I keep getting an error message saying "res.send is not a function" every time I try to use it. Movi ...