Switch button for revealing/ hiding div elements

Question

Switch button for revealing/ hiding div elements

I am currently working on a project that involves two divs placed next to each other. My goal is to implement the toggle function in order to collapse one div (Sidebar) horizontally while simultaneously expanding the other (Map) to occupy the full width of the former. After achieving this effect, I aim to have another toggle functionality that will revert both divs back to their original widths and positions. Although I have successfully accomplished the first operation, I am facing difficulties in figuring out how to execute the reverse action. A demonstration can be found at this Fiddle.

    $(document).ready(function(){
        $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").animate({width: '100%'});     
        });
    });

jquery css toggle

Answer 1

Answer №1

Here's a suggestion for you to try

Here is the HTML code:

<input type="button" data-name="show" value="Toggle" id="toggle">

This is the Script:

$(document).ready(function () {
            $("#toggle").click(function () {
                if ($(this).data('name') == 'show') {
                    $("#sidebar").animate({
                        width: '0%'
                    }).hide()
                    $("#map").animate({
                        width: '100%'
                    });
                    $(this).data('name', 'hide')
                } else {
                    $("#sidebar").animate({
                        width: '19%'
                    }).show()
                    $("#map").animate({
                        width: '80%'
                    });
                    $(this).data('name', 'show')
                }
            });
        });

You can view a demonstration here at DEMO

Answer 2

Here's a suggestion for you to try

Here is the HTML code:

<input type="button" data-name="show" value="Toggle" id="toggle">

This is the Script:

$(document).ready(function () {
            $("#toggle").click(function () {
                if ($(this).data('name') == 'show') {
                    $("#sidebar").animate({
                        width: '0%'
                    }).hide()
                    $("#map").animate({
                        width: '100%'
                    });
                    $(this).data('name', 'hide')
                } else {
                    $("#sidebar").animate({
                        width: '19%'
                    }).show()
                    $("#map").animate({
                        width: '80%'
                    });
                    $(this).data('name', 'show')
                }
            });
        });

You can view a demonstration here at DEMO

Answer 3

Answer №2

Ensure the div width is either set to 100% or 80%.

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            width: 'toggle'
        });
        var value = $("#map")[0].style.width !== "100%" ? '100%' : '80%';
        $("#map").animate({
            width: value
        });
    });
});

Check out the Working Fiddle here

Answer 4

Ensure the div width is either set to 100% or 80%.

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            width: 'toggle'
        });
        var value = $("#map")[0].style.width !== "100%" ? '100%' : '80%';
        $("#map").animate({
            width: value
        });
    });
});

Check out the Working Fiddle here

Answer 5

Answer №3

My typical approach involves using a secondary css class to indicate the current state of the div. For example, I may use a class like collapsed which is toggled or removed when the div expands, allowing for easy detection of user actions.

Check out the updated Fiddle here: http://jsfiddle.net/8wKxY/6/

Here's a sample code snippet:

$(document).ready(function(){
    $("#toggle").click(function(){
        if($(this).hasClass('expanded')){
            $("#sidebar").stop().animate({width: '19%'});
            $("#map").stop().animate({width: '80%'});
            $(this).removeClass('expanded');
        }
        else {
            $("#sidebar").stop().animate({width: '100%'});
            $("#map").stop().animate({width: '100%'});      
            $(this).addClass('expanded');
        }
    });
});

In this example, I've directly attached the control class to the button, but it would be better practice to attach it to a common container for both expandable divs.

It's also important to note that adding an overflow: hidden property to the sidebar ensures it doesn't go under the map when collapsing. In my implementation, I completely hide the sidebar once the animation is complete.

Answer 6

My typical approach involves using a secondary css class to indicate the current state of the div. For example, I may use a class like collapsed which is toggled or removed when the div expands, allowing for easy detection of user actions.

Check out the updated Fiddle here: http://jsfiddle.net/8wKxY/6/

Here's a sample code snippet:

$(document).ready(function(){
    $("#toggle").click(function(){
        if($(this).hasClass('expanded')){
            $("#sidebar").stop().animate({width: '19%'});
            $("#map").stop().animate({width: '80%'});
            $(this).removeClass('expanded');
        }
        else {
            $("#sidebar").stop().animate({width: '100%'});
            $("#map").stop().animate({width: '100%'});      
            $(this).addClass('expanded');
        }
    });
});

In this example, I've directly attached the control class to the button, but it would be better practice to attach it to a common container for both expandable divs.

It's also important to note that adding an overflow: hidden property to the sidebar ensures it doesn't go under the map when collapsing. In my implementation, I completely hide the sidebar once the animation is complete.

Answer 7

Answer №4

Learn how to utilize jQuery's toggleClass() method.

See a live demo here!

$(document).ready(function(){
  $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").toggleClass('fullWidth');     
  });
});

.fullWidth{
    width : 100% !important;
}

Answer 8

Learn how to utilize jQuery's toggleClass() method.

See a live demo here!

$(document).ready(function(){
  $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").toggleClass('fullWidth');     
  });
});

.fullWidth{
    width : 100% !important;
}

Switch button for revealing/ hiding div elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Looking to conceal an <hr> element using jQuery's slideToggle function and then reveal it when clicked once more

Hosting provider overhauls entire site, rather than just updating the UpdatePanel

Avoiding the use of apostrophes in jQuery or JavaScript

Issue with Bootstrap 4 nested tabs retaining active status

Highcharts stretching beyond parent container width in Chrome exclusive

Impact of Jquery on dropdown menus in forms

Tips for ensuring images are mobile-friendly in terms of screen size adaptation

What is the method for showcasing an h1 heading and an unordered list link side by

What methods does JUMflot use to update points or select items? Interested in adding objects to an array and redrawing them without altering the original item

Verify the status of the Devexpress aspxhtmlControl using jQuery to determine if it is active or inactive

Elements with a lower z-index do not have text drawn over them

assigning attributes to web addresses

Tips and Tricks for Resizing Images within an Angular iframe

Utilizing a div element for creating a clipping mask with CSS

Uncaught ReferenceError: ajaxUrl is undefined

"Employing AJAX along with jQuery in .NET often leads to the error message stating, 'The requested resource was not

Scrolling horizontally in md-list

The .val() and focus() methods are not functioning correctly

I'm wondering, what is the name of this, and how can I recreate it using CSS?

Running out of parenthesis options when using PHP to write JavaScript code