jQuery | selectable() and accordion()

jQuery UI is used to incorporate the powerful effects in the website or web pages .
In this article, about jQuery UI interactions and widgets will be discussed such as selectable and accordion which allows items to be selected and displayed in a logical manner.

  1. Selectable() Method
    This method allows the elements to be selected with the help of mouse. Using jQuery UI, we can select the DOM(Document Object Model) elements which is available to select. This can be done by clicking on the selectable object by mouse and performing other work.
    Syntax:
    The selectable() method has two forms and the use of each form depends on the requirement. These are as follows :-

    $(selector, context).selectable (options);
    $(selector, context).selectable ("action", [params]);

    The given table shows the different options that can be used with selectable() method:



    Option Purpose
    autoRefresh If the value of this option is set to “true”, it will allow the position and size of each selected element to be computed at the beginning of the selection
    operation. The default value this option is set to “true”.
    cancel This option is used to forbids the selection of the DOM elements (selectable elements). If the value of this option is set to li, then it will prevent the
    selection of all list items in the web page. The default value of this option is textarea, input, button, option, select. This means that by default, these
    elements cannot be selected the web page.
    delay This option is used to produce the delay between the click of the user and the start of selection of item. The main purpose of this option is to avoid
    unwanted selections. The default value of this option is 0.
    filter This option is used to indicate the part of the element which is used to select the items. The default value of this option is * which indicates the the item can be selected by clicking anywhere on the item.
    disabled This option is used to disable the process of selection .When the value of this option is set to true, it disables the selection process.To enable the
    selection process, the enable option is used. The default value of this option is false.

    Example:

    • Default Functionality –
      Code :

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!doctype html>
      <html lang="en">
      <head>
      <title>jQuery UI Selectable() Method - Default functionality</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style type="text/css">
      #select .ui-selecting {
                          background: aqua;
                          }
      #select .ui-selected { 
                          background: yellow; 
                          color: green; 
                          }
      #select { 
              list-style-type: none; 
              margin: 0; 
              padding: 0; 
              width: 50%; 
              }
      #select li { 
              margin: 3px; 
              padding: 10px; 
              font-size: 1.4em; 
              height: 18px; 
              }
      </style>
      <script>
      $( function() {
          $( "#select" ).selectable();
      });
      </script>
      </head>
      <body>
      <h1 align="center">Geeks for Geeks</h1>
      <center>
      <ol id="select">
      <li class="ui-widget-content">Web Tech</li>
      <li class="ui-widget-content">Linux</li>
      <li class="ui-widget-content">DBMS</li>
      <li class="ui-widget-content">CBNST</li>
      <li class="ui-widget-content">Theory of Computation</li>
      </ol>
      </center>
      </body>
      </html>                    

      chevron_right

      
      

      Output:
      Before selection:

      After selection of Linux and DBMS section section:

      Note: Use Ctrl + Click to select multiple options.

    • Grid Display –
      Code :

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!doctype html>
      <html lang="en">
      <head>
      <title>jQuery UI Selectable() Method - Display as grid</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style type="text/css">
      #grid .ui-selecting { 
                          background: aqua;
                          }
      #grid .ui-selected { 
                      background: yellow; 
                      color: green; 
                      }
      #grid { 
          list-style-type: none; 
          margin: 0; 
          padding: 0; 
          width: 450px; 
          }
      #grid li { 
              margin: 3px; 
              padding: 1px; 
              float: left; 
              width: 50px; 
              height: 50px; 
              font-size: 2.5em; 
              text-align: center; 
              }
      </style>
      </script>
      </script>
      <script>
      $( function() {
          $( "#grid" ).selectable();
      });
      </script>
      </head>
      <body>
      <center>
      <h1>Geeks for Geeks</h1>
      <ol id="grid">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
      <li class="ui-state-default">13</li>
      <li class="ui-state-default">14</li>
      <li class="ui-state-default">15</li>
      <li class="ui-state-default">16</li>
      <li class="ui-state-default">17</li>
      <li class="ui-state-default">18</li>
      <li class="ui-state-default">19</li>
      <li class="ui-state-default">20</li>
      <li class="ui-state-default">21</li>
      <li class="ui-state-default">22</li>
      <li class="ui-state-default">23</li>
      <li class="ui-state-default">24</li>
      <li class="ui-state-default">25</li>
      <li class="ui-state-default">26</li>
      <li class="ui-state-default">27</li>
      <li class="ui-state-default">28</li>
      </ol
      </center
      </body>
      </html>                    

      chevron_right

      
      

      Output:
      Before selection:

      After selection of the required numbers from the grid:

  2. Accordion() Method:
    The accordion is a widget which is provided by jQuery UI. The main purpose of accordion is to break the page content into logical section.Each section consist of two parts –

    1. Header This part contains the title of the section. The header section is usually created using heading tags.
    2. Body This part contains the content of the section.The body section is usually created using div tag.

    The accordion in the web page can be create using accordion() method provided by jQuery library.
    Syntax:
    The syntax to use accordion method is as follows

    $(selector).accordion (options)
    $(selector).accordion ("action", params)

    The given table shows the different options that can be used with accordion() method:

    OPTION PURPOSE
    active This option can take the boolean and integer values only.When the option is set to false, it will allow the panels to collapse. The default value of this option is true.
    animate This option can take integer, boolean or string values .This option is used to produce animation while opening the panels. If the value of this option is set to false, it will disable the animation.
    disabled This option is used to disable the accordion .When the value of this option is set to true, it disables the accordion. To enable the accordion process, the disabled option is set to false . The default value of this option is false.

    Example:

    • Default Functionality –In default functionality, the one section of the accordion is always open.
      Code :

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!doctype html>
      <html lang="en">
      <head>
      <title>Accordion Effect - Default functionality</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      </script>
      </script>
      <script>
      $(function() {
          $( "#gfg" ).accordion();
      });
      </script>
      </head>
      <body>
      <h1 align="center">Welcome to Geeks for Geeks</h1>
      <div id="gfg">
      <h3>Web Technology</h3>
      <div>
      <p>
          Web technology refers to the means by which computers 
          communicate with each other using markup languages and
          multimedia packages.
      </p>
      </div>
      <h3>CBNST</h3>
      <div>
      <p>
      Computer Based Numerical and Statistical Techniques: CBNST is
      use to optimize performance and minimize error in problem-solving
      application. Application of Computer Based Numerical and
      Statistical Techniques:
      </p>
      </div>
      <h3>Data Structures</h3>
      <div>
      <p>
      A data structure is a particular way of organizing data in a computer
       so that it can be used effectively. 
      </p>
      </div>
      <h3>Algorithms</h3>
      <div>
      <p>
      An algorithm is an unambiguous specification of how to solve a
      class of problems. Algorithms can perform calculation, data processing
      and automated reasoning tasks.
        
      </p>
      </div>
      </div>
      </body>
      </html>                    

      chevron_right

      
      

      Output:
      Before clicking on any section

      After clicking on Data Structures section

    • Collapsible Content –To remove the default functionality, the collapsible option is set to true.
      Code :

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!doctype html>
      <html lang="en">
      <head>
      <title>jQuery UI Accordion - Collapsible Content</title>
      <link rel="stylesheet" 
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      </script>
      </script>
      <script>
      $(function() {
          $( "#gfg" ).accordion({ collapsible: true});
      });
      </script>
      </head>
      <body>
      <h1 align="center">Welcome to Geeks for Geeks</h1>
      <div id="gfg">
      <h3>Web Technology</h3>
      <div>
      <p>
       Web technology refers to the means by which computers 
       communicate with each other using markup languages and 
       multimedia packages.
      </p>
      </div>
      <h3>CBNST</h3>
      <div>
      <p>
      Computer Based Numerical and Statistical Techniques: 
      CBNST is use to optimize performance and minimize error
      in problem-solving application.
      </p>
      </div>
      <h3>Data Structures</h3>
      <div>
      <p>
      A data structure is a particular way of organizing data in a computer
       so that it can be used effectively. 
      </p>
      </div>
      <h3>Algorithms</h3>
      <div>
      <p>
      An algorithm is an unambiguous specification of how to solve a class
      of problems. Algorithms can perform calculation, data processing and
      automated reasoning tasks.
      </p>
      </div>
      </div>
      </body>
      </html>                    

      chevron_right

      
      

      Output:
      After clicking the Data Structures option one time

      After clicking the Data Structures option twice



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.