Animate the sliding up of divs using Jquery SlideToggle

Is there a way to make this perfect example slide up instead of pushing the 'navs' down?

View Example Here

Currently, it reveals from top to bottom (pushing the menu down), but I want it to slide up and push the navs up when clicked.

The fiddle provided is very close to what I am looking for; however, I want the content to slide up to reveal.

I tried this code but it didn't work:

.animate({scrollTop: $('.dropdown').offset().top}, 250);

Do I need to adjust CSS positioning as well? I am still learning jQuery so any guidance would be appreciated.

UPDATE**

Here is an example of what I am aiming for:

Desired Outcome Example

The challenge is implementing the functionality demonstrated in the first fiddle where it has dual functions.

- When div 1 is clicked, it slides up to reveal content in section 2

- Clicking div 2 subsequently displays its content in the same section as div 1

- Clicking div 2 again should slide down to hide that section

And vice versa for div 1 and div 2.

Update 2**

I have made progress! See the updated fiddle here:

Improved Fiddle Link

The only remaining issue is getting the black menu to push up to create a revealing effect. Would adjusting the CSS fixed positioning help with this? Changing it to relative seems to disrupt the animation.

I came across a website (DeanCare) that achieves this effect elegantly, but their code is complex and outdated. My goal is to simplify the code while achieving the same sliding effect.

Update 3**

This is the closest I've gotten, but it's still not quite right:

Updated Fiddle Here

jqueryhtmlcssjquery-animateslidetoggle

Answer №1

Is this the right way to go?

UPDATE: Check out the updated version on jsFiddle

/* CREATED BY SHIVAM BHALLA */

(function($) {
    $('body').addClass('js');

    var $toggler = $('#toggler'),
        $wrapper = $toggler.find('.wrapper'),
        $pager = $toggler.find('.pager'),
        $content = $toggler.find('.content');

    $toggler.css('height', $content.height() + $pager.height());
    $wrapper.css('top', $content.height());
    $content.hide();

    $pager.find('a').on('click', function(e) {
        var $this = $(this),
            $target =  $( $(this).attr('href') ),
            $count = 0;

        if ($count === 0) {
            $wrapper.animate({'top' : 0});
            $count = 1;
            $this.addClass('selected');
        } 
        if ($target.hasClass('active')) {
            $('.selected').removeClass('selected');
            $wrapper.animate({'top' : $content.height()}, function() {
                $target.hide().removeClass('active');
            });
        } else {
            $wrapper.find('.active').slideUp().removeClass('active');
            $target.addClass('active').slideDown();
            $('.selected').removeClass('selected');
            $this.addClass('selected');
        }       

        e.preventDefault();            
    });



})(jQuery);

P.S: Brand new JavaScript, HTML & CSS code that also functions well without JavaScript enabled.

Answer №2

Include the following in your CSS file:

#panels {
    height: 90px;
    overflow: hidden;
}

Update .info-panel to look like this:

.info-panel { 
    display: none;
    width: 300px;
    padding: 50px 20px 20px 20px;
    position: absolute;
}

Check out the Fiddle

Answer №3

If you're looking to enhance your user interface, consider implementing jQuery UI tabs with some customized options.

Check out this Working Example

 $(function () {
     $("#tabs").tabs({
         collapsible: true,
         active: false,
         fx: {
             height: 'toggle',
             duration: 'slow'
         }
     });

     // Adjust the classes
     $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
         .removeClass("ui-corner-all ui-corner-top")
         .addClass("ui-corner-bottom");
     // Position the navigation at the bottom
     $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");

 });

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

with every instance of an ajax request sent to a separate file

Currently, I have a forEach function that is printing the "local" column from a specific database: View image here Everything is working well up to this point, and this is the output I am getting: See result here Now, my goal is to send variables via P ...

javascriptphpjqueryajax

Having trouble with the jQuery Selector .not() function not functioning as expected

I can't figure out why the .not() selector is not working for validation. Here is my HTML form: <input name="Title" id="Title" type="text" /> <div id="ErrorTitle" class="hiddenbox"></div> <input name="Text" id="Text" type="text" ...

jqueryjquery-selectors

Retrieving raw PCM data from webAudio / mozAudio APIs

I have been exploring ways to store the output from the webAudio API for future reference. It seems that capturing PCM data and saving it as a file might meet my needs. I am curious to know if the webAudio or mozAudio APIs have built-in functionality for ...

javascripthtmlweb-audio-api

Javascript is handling the JSON Request flawlessly, however, when using Nodejs, an error is encountered with a status

I'm trying to fetch a simple JSON File in NodeJS. Using Javascript and jQuery, it functions perfectly: $(document).ready(function() { $.getJSON('https://www.younow.com/php/api/broadcast/info/curId=0/user=Peter', function(json) { if ...

javascriptjqueryjsonnode.js

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey

Calculate the sum of floating point or decimal numbers from a textarea using JavaScript

I'm trying to work with a text area that contains decimal/float numbers. However, the code I found online seems to be ignoring commas and periods when summing up the values. Is there a way to handle decimal/float numbers correctly in this scenario? ...

javascriptjqueryhtml

`There are two text boxes in a blog post editor within tinyMCE`

https://i.sstatic.net/RVMUO.png I'm currently working on building a blog app using Django. The issue I'm facing is related to the Tinymce editor in the post creation form. Everything works perfectly fine except for one annoying element that show ...

htmldjangotinymce

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs

Tips for refreshing Facebook's og tags

I've been racking my brains over this issue for days, and despite the abundance of similar inquiries, I have yet to find a solution. On my blog-like website, each post requires its own title and description for Facebook articles. I know I can set the ...

javascripthtmlfacebookweb

Getting the click event object data from a dynamically created button with jQuery or JavaScript

I have a task of tracking page button click events. Typically, I track the objects from statically created DOM elements using: $('input[type=button]').each(function () { $(this).bind('click', function () { ...

javascriptjqueryjquery-events

The font sizes appear larger when styled with HTML compared to using Photoshop

When I view my <nav> element in Chrome, the font size of each list element appears much larger than it was originally designed in Photoshop. The font is displaying 23px wider in Chrome compared to Photoshop, even though my resolution is set at 72dpi ...

htmlcssphotoshopwebfonts

The toggle password visibility eye is experiencing an error with an Uncaught ReferenceError: An invalid assignment is being attempted in the code

Here's a code I wrote for toggling password visibility, but I encountered an error: HTML: <!--Hide/Show password--> <button class="form-password__visibility" type="button" onclick="$('#inp ...

javascripthtmljquerypasswordstoggle

Container will keep items from spreading out

Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap prope ...

htmlcssflexboxbootstrap-5

elements positioned next to each other with gaps in between

Why is it so challenging to position two divs next to each other with a small space between them? I've attempted <div class="wrapper"> <div class="box" style="background-color: pink;">First Div</div> <div class="spacer">& ...

htmlasp.net

Capturing JSON response in Jquery

I'm struggling to figure out what's going wrong with this code. I can't seem to get any response in the status field... <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"> </script> <input typ ...

jqueryjson

Modifying the color scheme of the table background and text

After finding a code example online to assist with creating a table in my project, I am faced with the challenge of changing the background color of the white rows to match the dark blue used for others. Additionally, I cannot figure out how to change the ...

htmlcsshtml-table

How can I enable autofocus on a matInput element when clicking in Angular 6?

Is there a way to set focus on an input element after a click event, similar to how it works on the Google Login page? I've tried using @ViewChild('id') and document.getElementId('id'), but it always returns null or undefined. How ...

angularhtmlangular-material

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...

javascripthtmljquerycssbootstrap-4

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

csstwitter-bootstrap

Problems encountered with nested AJAX calls and the $.when.apply function handling deferred promises efficiently

I am attempting to create a triple nested series of AJAX calls, as shown in the basic structure below (fail calls have been omitted). Progress is being made up to the second level with the eventCalls. The final when.apply.done only triggers after every si ...

javascriptjqueryajaxpromisejquery-deferred