Jump to content

Quick question regarding showing and hiding div with click of button


man5
Go to solution Solved by man5,

Recommended Posts

I have a simple setup where I have a collapsed menu.  When you click on the button, it will open a menu.  If the menu is already opened and you open another menu, the previous menu will collapse.  All that works.  The only thing I noticed is that It will not collapse the opened menu if I click the same button.  That menu will only collapse if I open a different menu.  I was wondering how the code below will look with that extra function added?

 

Here's the code for that. 

<h5 class="mobile-collapse__title">Title Button</h5>
<div class="mobile-collapse__content">
  <ul>
    <li>list 1</li>
    <li>list 2</li>
    <li>list 3</li>
  </ul>
</div>
<script>
    $(document).ready(function($){
      $(".mobile-collapse__title").click(function(e) {
          e.preventDefault();
          $('.mobile-collapse__content:visible').hide();
          $(this).next('div.mobile-collapse__content').show();
      });
    });
  </script>
Link to comment
Share on other sites

You could try something like this

<script>
$(document).ready(function($){
    //HIDE ALL LISTS
    $('.mobile-collapse__content:visible').hide();
    
    //PROCESS A TITLE BUTTON CLICK
    $(".mobile-collapse__title").click(function(e) {
        e.preventDefault();
        if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
            $('.mobile-collapse__content:visible').hide();
            $(this).next('div.mobile-collapse__content').show();
        } else {
            $('.mobile-collapse__content:visible').hide();
        }
    });
});
</script>
Edited by cyberRobot
Link to comment
Share on other sites

 

You could try something like this

<script>
$(document).ready(function($){
    //HIDE ALL LISTS
    $('.mobile-collapse__content:visible').hide();
    
    //PROCESS A TITLE BUTTON CLICK
    $(".mobile-collapse__title").click(function(e) {
        e.preventDefault();
        if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
            $('.mobile-collapse__content:visible').hide();
            $(this).next('div.mobile-collapse__content').show();
        } else {
            $('.mobile-collapse__content:visible').hide();
        }
    });
});
</script>

 

 

Awesome! That does the trick.  Thanks.

Link to comment
Share on other sites

Awesome! That does the trick.  Thanks.

 

 

One last thing I forgot.  I only want that jquery code to run if it's a certain screen size.  Like the code below.  Once I add the screen width limit, the code inside it won't run for those menus.  Can you see what's going wrong here?

jQuery(document).ready(function($){

        if (screen.width <= 767) {
            //HIDE ALL LISTS
            $('.mobile-collapse__content:visible').hide();

            //PROCESS A TITLE BUTTON CLICK
            $(".mobile-collapse__title").click(function(e) {
                e.preventDefault();
                if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
                    $('.mobile-collapse__content:visible').hide();
                    $(this).next('div.mobile-collapse__content').show();
                } else {
                    $('.mobile-collapse__content:visible').hide();
                }
            });
        }
    });
Link to comment
Share on other sites

  • Solution

 

One last thing I forgot.  I only want that jquery code to run if it's a certain screen size.  Like the code below.  Once I add the screen width limit, the code inside it won't run for those menus.  Can you see what's going wrong here?

jQuery(document).ready(function($){

        if (screen.width <= 767) {
            //HIDE ALL LISTS
            $('.mobile-collapse__content:visible').hide();

            //PROCESS A TITLE BUTTON CLICK
            $(".mobile-collapse__title").click(function(e) {
                e.preventDefault();
                if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
                    $('.mobile-collapse__content:visible').hide();
                    $(this).next('div.mobile-collapse__content').show();
                } else {
                    $('.mobile-collapse__content:visible').hide();
                }
            });
        }
    });

 

 

Alright I've solved by second issue.  This is the new code.

$(document).ready(function($){

       
            

            //PROCESS A TITLE BUTTON CLICK
            $(".mobile-collapse__title").click(function(e) {
                e.preventDefault();
                if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
                    $('.mobile-collapse__content:visible').hide();
                    $(this).next('div.mobile-collapse__content').show();
                } else {
                    $('.mobile-collapse__content:visible').hide();
                }
            });
        
    });


    @media (max-width: 767px) {
      .mobile-collapse__content { 
         display: none;
      }
    }

Link to comment
Share on other sites

I'm not sure what is wrong with that code. But, you are making it more complicated than it needs to be. Rather than continually wrapping code in nested containers you could simply do a "return" if the screen size is greater than the target

 

 

<script>
$(document).ready(function($){
    //Prevent executionif screen size > 767
    if (screen.width > 767) { return true; }

    //HIDE ALL LISTS
    $('.mobile-collapse__content:visible').hide();
    
    //PROCESS A TITLE BUTTON CLICK
    $(".mobile-collapse__title").click(function(e) {
        e.preventDefault();
        if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
            $('.mobile-collapse__content:visible').hide();
            $(this).next('div.mobile-collapse__content').show();
        } else {
            $('.mobile-collapse__content:visible').hide();
        }
    });
});
</script>
Link to comment
Share on other sites

 

I'm not sure what is wrong with that code. But, you are making it more complicated than it needs to be. Rather than continually wrapping code in nested containers you could simply do a "return" if the screen size is greater than the target

<script>
$(document).ready(function($){
    //Prevent executionif screen size > 767
    if (screen.width > 767) { return true; }

    //HIDE ALL LISTS
    $('.mobile-collapse__content:visible').hide();
    
    //PROCESS A TITLE BUTTON CLICK
    $(".mobile-collapse__title").click(function(e) {
        e.preventDefault();
        if($(this).next('div.mobile-collapse__content').css('display') == 'none') {
            $('.mobile-collapse__content:visible').hide();
            $(this).next('div.mobile-collapse__content').show();
        } else {
            $('.mobile-collapse__content:visible').hide();
        }
    });
});
</script>

 

I tried your method with screen width and it doesn't work the way I want it.  But if I use the css code, it works exactly as I want it to.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.