Toggle two elements simultaneously by clicking on one of them - displaying one element while hiding the other

Question

Toggle two elements simultaneously by clicking on one of them - displaying one element while hiding the other

I am facing an issue with toggling the visibility of two divs using a button click event. One div is initially hidden with a display property set to none, while the other div is visible.

My goal is to have this behavior toggle on each click event - the first div becoming visible while the second one becomes hidden, and vice versa.

Unfortunately, I do not have any experience with Jquery, which makes finding a solution challenging. Can anyone help me achieve this functionality?

I attempted to resolve this problem by implementing the following code snippet:

<script>
      $(document).ready(function(){
          $("#filter").click(function(){
             $("#sidebar").toggle(function(){
                 $("#sidebar").hide();
                 $(".right-box").show();
             }, function(){
                 $("#sidebar").show();
                 $(".right-box").hide();
             });
         });
     });
</script>

However, the implementation does not work as expected. The divs appear and disappear quickly without the intended smooth transition.

jquery html css

Answer 1

Answer №1

Just wanted to share this helpful information with you.

Here is the HTML code snippet:

 <div id='content'>Hello World</div>  
 <input type='button' id='hideshow' value='hide/show'>

And here's the Jquery code:

jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {        
     jQuery('#content').toggle('show');
});
 });

Check out the demo here

Answer 2

Just wanted to share this helpful information with you.

Here is the HTML code snippet:

 <div id='content'>Hello World</div>  
 <input type='button' id='hideshow' value='hide/show'>

And here's the Jquery code:

jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {        
     jQuery('#content').toggle('show');
});
 });

Check out the demo here

Answer 3

Answer №2

You might be thinking too hard about it.

    $(document).ready(function(){
        $(".click").on("click", function(){
           $(".shown-content").fadeToggle('slow');
           $(".hidden-content").fadeToggle('slow');
    });
    });

Check out this demo: http://jsfiddle.net/yomisimie/noc0fqz1/

Answer 4

You might be thinking too hard about it.

    $(document).ready(function(){
        $(".click").on("click", function(){
           $(".shown-content").fadeToggle('slow');
           $(".hidden-content").fadeToggle('slow');
    });
    });

Check out this demo: http://jsfiddle.net/yomisimie/noc0fqz1/

Answer 5

Answer №3

 <!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script>
      $(document).ready(function(){
        $("#hide").click(function(){
          $("#a").show();
          $("#b").hide();
        });
         });
      $(document).ready(function(){
        $("#show").click(function(){
        $("#b").show();
        $("#a").hide();
        });
      });

    </script>
    </head>
    <body>

  <div id="a">Clicking div 1 will display its content.</div>
   <div id="b">Clicking div 2 will display its content.</div>
    <button id="hide">Show div 1</button>
     <button id="show">Show div 2</button>

   </body>
    </html>

Hopefully, this code meets your requirements.

Answer 6

 <!DOCTYPE html>
  <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script>
      $(document).ready(function(){
        $("#hide").click(function(){
          $("#a").show();
          $("#b").hide();
        });
         });
      $(document).ready(function(){
        $("#show").click(function(){
        $("#b").show();
        $("#a").hide();
        });
      });

    </script>
    </head>
    <body>

  <div id="a">Clicking div 1 will display its content.</div>
   <div id="b">Clicking div 2 will display its content.</div>
    <button id="hide">Show div 1</button>
     <button id="show">Show div 2</button>

   </body>
    </html>

Hopefully, this code meets your requirements.

Toggle two elements simultaneously by clicking on one of them - displaying one element while hiding the other

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing the power of $.ajax() to parse through an XML document

(Background-sizing: Full) encompassing margins

Update database upon drag-and-drop using jQuery

jQuery address plugin does not function properly when content is being replaced

Press the button to eliminate

Tabindex issue arises due to a conflict between Alertify and Bootstrap 4 modal

The selected jQuery plugin is not functioning properly within CodeIgniter framework

Error: An unexpected 'if' token was not caught

Modifying an image with jQuery

I am trying to collapse the table header but I am having trouble doing so

Is your browser displaying dimensions different from the ones specified in the CSS?

Adjust the spacing between two elements "p" in a single row using flexbox

Add PHP functionality to insert a jQuery array of select2 tags

Using CSS nth-child to create a two-column checkers layout

Issues with events keyup and keydown not being triggered in Opera

Having trouble iterating over the JSON data received from an AJAX call

Removing a section of HTML from an EmailMessage Body in EWS

Update HTML element using Jquery periodically

When setting the margin to auto, it perfectly centers elements on servers and IE, but on Chrome off the server, it appears to be aligned to the

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer