Quick question regarding showing and hiding div with click of button

[man5]

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>

[cyberRobot]

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 March 18, 2016 by cyberRobot

[man5]

 

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.

[man5]

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();
                }
            });
        }
    });

[man5]

 

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;
      }
    }

[Psycho]

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>

[man5]

 

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.