Tuesday, May 8, 2012

How to detect accordion close or open?

jQuery mobile comes up with accordion feature which is the 'collapsable' property. We can detect this accordion event with the below code:
 

Menu 1 : Click to open / close

Paragraph 1.1

Paragraph 1.2

Paragraph 1.3

Menu 2 : Click to open / close

Paragraph 2.1

Paragraph 2.2

Paragraph 2.3


For the above code block, we use the blow script:
$(".ui-collapsible").live ("tap", function (event)
{
  var txt = "";
  if ($("#id1 h1.ui-collapsible-heading-collapsed").length) 
    txt += "Menu 1: closed\n";
  else 
    txt += "Menu 1: open\n";
    
  if ($("#id2 h1.ui-collapsible-heading-collapsed").length) 
    txt += "Menu 2: closed\n";
  else 
    txt += "Menu 2: open\n";
    
  alert (txt);
});
Here we test there the class 'ui-collapsible-heading-collapsed' is present or not.

See the book OpenCart 1.4 Template Design Cookbook.
See the book Joomla Mobile Development Beginners Guide




List of my works:

Opencart Extensions:

  1. Product Based Quantity Wise Shipping: Find it here.
  2. OpenSSLCOMMERZ: integrate SSLCOMMERZ with opencart: Find it here.
  3. Fine Search v.1.0 - Improves Opencart search feature to find relevant: Find it here.
  4. Opensweetcaptcha - An easy way to generate attractive captcha for your system!: Find it here.
  5. Custom Field Product - add unlimited custom fields to the product form: Find it here.
  6. Formcaptcha - add captcha on the register page: Find it here.

My Books:

  1. OpenCart 1.4 Template Design Cookbook.
  2. Joomla Mobile Development Beginners Guide

No comments: