1

I have the following Demo: http://jsfiddle.net/NCj2u/

Currently it works on all platforms, but I'd prefer if the show button & hidden content only worked in Tablet & Mobile. Desktop would show the content automatically and hide the button.

Can someone explain how I do this? Would I use media queries or do this in my Javascript?

My jQuery:

$(document).ready(function() {
  $('.nav-toggle').click(function(){
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');                   

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
                        //change the button label to be 'Show'
        toggle_switch.html('Show');
      }else{
                        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      }
    });
  });

});

Thank you.

michaelmcgurk
  • 5,867
  • 22
  • 75
  • 167
  • 1
    http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery - Start here – tahdhaze09 Jul 09 '13 at 16:29
  • 1
    Can you add a small class at the top level by detecting the user-agent in the backend. say for example . If you can then the solution is pretty easy. you can do a $('body.mobile .nav-toggle') instead of $('.nav-toggle') – Srinivas Jul 09 '13 at 16:34
  • You could use $.browser but be aware that its been deprecated in the newer versions – Kiran Ruth R Jul 09 '13 at 16:35

2 Answers2

6

Hmmm there are few options you could try . I personally recommend against browser detection unless you want to specifically target only a browser that allows your implementation. For your requirement why not try media queries?

 .nav-toggle{
   display : none; // display none for everyone
 }

/* Landscape phone to portrait tablet  show the button */
@media (max-width: 767px) {

 .nav-toggle{
   display : block; // or inline-block or inline : which ever is appropriate for you.
 }

}

Kiran Ruth R
  • 823
  • 1
  • 11
  • 27
2

With these scripts you can detect any mobile browser
http://detectmobilebrowsers.com/
I think the shortest solution is to ask for mobil browsers and if the user isn't using one execute the click() function of your button

Fabian N.
  • 3,570
  • 2
  • 20
  • 44