CODEWITHSUNDEEP
jqueryhtmljquery-ui-accordion
MKK
MKK

Reputation: 2753

Can I set jQuery's accordion depending on browser's window width?

This script is working perfectly if I click Menu(h3), it does shrinks whole menu to minimum height.
Then I click again, it expands back to the original size.

Today, there are two kinds of viewer such as PC and Smart Phone.

I'd like to make this menu appear as the size of minimum as default when a viewer is seeing this page with smartphone, whose browser width is less than 400px. Minimum size means the size of the height when accordion is closed.
Is it possible?

javascript

jQuery(document).ready( function() {
    $(".accordion dt").click(function(){
        $(this).next("dd").slideToggle();
        $(this).next("dd").siblings("dd").slideUp();
        $(this).toggleClass("open");   
    $(this).siblings("dt").removeClass("open");
});

html

<div class="accordion">
    <dt><h3>Menu</h3></dt>
    <dd>
    Menu Contents
    </dd>
</div>

UPDATE

    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        1. I want to show Menu as minimum size(Shrinked size)
    }else {
        2. I want to show Menu as maximum size(Expanded size)
    }

Upvotes: 0

Views: 460

Answers (1)

anarchocurious
anarchocurious

Reputation: 600

It's hard to decide the exact form of the code without more information about exactly what you are trying to do. If you want to check the type of browser viewing the page, I would recommend matching navigator.userAgent string with common mobile browsers like this:

var sUserAgent = navigator.userAgent.toLowerCase();
var bMobileBrowser = (sUserAgent.indexOf('iphone') !== -1) || (sUserAgent.indexOf('android') !== -1) || (sUserAgent.indexOf('mobile') !== -1);

if(bMobileBrowser) {
  // Do something special if it's a mobile browser
}

That being said, if you're set on varying your content according to the size of the browser window, jQuery furnishes you with the handy cross-browser methods $(window).width() and $(window).height() which respectively return the width and the height of the viewport in pixels (shocker!). In your case the code might look something like this:

// This is a much shorter (and my preferred) way of writing jQuery(document).ready
$(function() {

  // Why bother rewrapping '.accordion dt' in a new selector every time its referenced?
  var $accordionHeader = $(".accordion dt");

  $accordionHeader.click(function() {
    $accordionHeader.next("dd").slideToggle();
    $accordionHeader.next("dd").siblings("dd").slideUp();
    $accordionHeader.toggleClass("open");   
    $accordionHeader.siblings("dt").removeClass("open");
  });

  // Toggle the accordion if the browser window's width is less than 400px
  if($(window).width() < 400) $accordionHeader.click();
});

Upvotes: 1

Related Questions