Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I'm facing a jquery issue and could use some assistance. I am trying to achieve the following:

  1. Add a class "active" to style tags when they are active.
  2. Slide up/down vertically within a div (#information - containing "About" and "Contact").
  3. Slide left/right horizontally between page divs (moving between "About" and "Contact").
  4. If either "About" or "Contact" is the active "page" and is displayed, clicking on "About" should close and slide up the #information wrapper.

Here is my progress so far: JSFiddle

HTML:

<div id="information">
     <div id="info-about"></div>
     <div id="info-contact"></div>
</div>
<ul>
    <li><a id="about" class="page" href="#">About</a></li>
    <li><a id="contact" class="page" href="#">Contact</a></li>
</ul>

CSS:

#information {
    width: 200%;
    height: 300px;
    position: relative;
    left: 0;
    display: none;
}

#info-about {
    width: 50%;
    height: inherit;
    background: red;
    float: left;
}

#info-contact {
    width: 50%;
    height: inherit;
    background: blue;
    float: left;
}

jQuery:

$('li a').click(function(e) {
    e.preventDefault();
    $('a').removeClass('active');
    $(this).addClass('active');

    if ($(this).is('.page.active')) {
        $('#information').slideDown('slow');
    }
});

$('#about').click(function () {
    $('#information').animate({
        left: "0"
    }, 1000);
});

$('#contact').click(function () {
    $('#information').animate({
        left: "-100%"
    }, 1000);
});

If you can assist me with this, it would be greatly appreciated. Additionally, I am curious if it's possible to combine all these functionalities into one script rather than separate parts.

Thank you for your help!

Answer №1

Are you looking for this solution https://jsfiddle.net/c01gat3/wa1e8oyv/

$('li a').click(function(e) {
    e.preventDefault();

    if ($(this).hasClass('active')) {
        $('#information').slideUp('slow');
        $('a').removeClass('active');
    } else {
        $('#information').slideDown('slow');
        $('a').removeClass('active');
        $(this).addClass('active');

        if(this.id == 'about'){
            $('#information').animate({
            left: "0"
            }, 1000);

        } else {
            $('#information').animate({
            left: "-100%"
            }, 1000);
        }
    }
});

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

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. https://i.sstatic.net/iruev.png Wondering how to implement a multi-level dropdown in your Angular proje ...

Using AJAX POST requests with PHP and SQL queries seems to function properly but unfortunately, it only

I am facing an issue with deleting an item from a list using AJAX, PHP, and MySQL. The first time I try to delete an item, the AJAX request works perfectly. However, on subsequent attempts, although the AJAX request returns success, the item is not deleted ...

Why isn't my API's JSON Response showing up in PHP?

Having trouble displaying the JSON response from an API call in PHP. Despite confirming that the server, IP settings, and API status are all fine on the provider's end, I am unable to identify the problem. This is how I'm handling the PHP part: ...

Delete the class when the user clicks anywhere on the page

I have 2 buttons that will toggle/remove a class when the user clicks on them. $('.social-toggle').on('click', function() { $('.social-networks').not($(this).next()).removeClass('open-menu') $(this).next().toggl ...

Exclude certain labeled posts from appearing on the homepage of a Blogger website

I am managing a website dedicated to the best WhatsApp status on my blogger blog. I am in search of a way to conceal certain category posts from appearing on the homepage using coding techniques. Despite extensive research, I have been unsuccessful in fi ...

CSS technique for adjustable column width in HTML tables

Important Note: The HTML to PDF rendering engine I am using disables JavaScript by default, so I am seeking solutions that utilize CSS only. Within my report, there is a table utilized for accounting purposes featuring 11 columns: The first column serve ...

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

Customized selection groups for dropdown menu based on alphabetical order

I am dynamically generating a select list from an array of data and I want to group the options alphabetically. For example, here is the data: data = [ ['bcde','21254'], ['abcd','1234'], ['abcde',' ...

Use HTML to showcase an image that dynamically changes based on the outcome of a query function

Hello there, I hope my inquiry is clear enough. I apologize for reaching out as I am unsure where to begin and what exactly I should be focusing on. Currently, I have an image displayed in an HTML page like this: <div id="tag_sunrise_sunset"><p ...

Is it possible for web bots to artificially inflate the number of downloads?

I am managing a PHP program that is linked to a MYSQL database on a website. The program functions by retrieving an integer field from the database, incrementing it, and then updating the number to keep track of the downloads. While the program itself work ...

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

Broken functionality: Ajax links malfunctioning

I decided to enhance my code by incorporating ajax. Specifically, I wanted to implement ajax on patients/index #patientenajax <h1>Listing patients</h1> <div id="patientenajax"><%= render "patienten" %></div> Then, in ...

How to style a webpage to be printed in CSS with A4 dimensions

Whenever I try to print my webpage, I encounter an issue where everything changes on the printout. I would like to be able to print a webpage that looks exactly like what is displayed on the screen. Here is an example of what I am looking for: enter imag ...

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

My goal is to redirect the request to the edit page if the server response status is failed. The updated code below provides more clarity with changed variable names and IDs for security reasons. Controller: @Controller @RequestMapping("abc") public clas ...

The PrimeNG Tree component offers a range of unique features

Encountering an issue with the PrimeNG tree in angular2 Let's take a look at the code snippet from product_tree.component.ts : constructor(private http: HttpClient, private productsService: ProductsService) { this.productsService.getProductsClasse ...

Although the ng-click HTML code functions as expected, the same code within an AngularJS function does not seem to work properly

HTML <div id="rightpane"> <div id="rightpanecontent" > <div id ="Addbtn" style="text-align: right;"> <button type="btnAdd" class="btnAddText" ng-click="addText()" style="margin-top:10px;margin-left:166px; color: white;b ...

Is it possible to combine ng-switch and ng-if directives in Angular?

I attempted to combine the angular ng-switch and ng-if directives, but it doesn't seem to be functioning properly. Here is what I tried: <div data-ng-if = "x === 'someValue'" data-ng-switch on = "booleanValue"> <div data-ng-swit ...

Using JQuery to swap out background images in CSS

I have been working on a slider that is supposed to fade one picture over another. The issue is that the background change seems to only work in the Dreamweaver preview and not in the actual browser. loop = setInterval(function(){ $("#slider").css("ba ...

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

Guide to retrieving and showing specific items from a DropDownList in a Text box using JavaScript, HTML, and AngularJS

Can someone explain how to extract and select items from a DropDownList and display them in a Textbox using JavaScript/HTML/AngularJS? Here are more details: I have a dropdown list with many items. When I click on an item from the list, it should be dis ...