I have the following Demo: /
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.
I have the following Demo: http://jsfiddle/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.
Share Improve this question asked Jul 9, 2013 at 16:25 michaelmcgurkmichaelmcgurk 6,52325 gold badges101 silver badges197 bronze badges 3- 1 stackoverflow./questions/3514784/… - Start here – tahdhaze09 Commented Jul 9, 2013 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 <body class="mobile">. If you can then the solution is pretty easy. you can do a $('body.mobile .nav-toggle') instead of $('.nav-toggle') – Srinivas Commented Jul 9, 2013 at 16:34
- You could use $.browser but be aware that its been deprecated in the newer versions – Kiran Ruth R Commented Jul 9, 2013 at 16:35
2 Answers
Reset to default 6Hmmm there are few options you could try . I personally remend 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.
}
}
With these scripts you can detect any mobile browser
http://detectmobilebrowsers./
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