Open In App

jQuery | selectable() and accordion()

Improve
Improve
Like Article
Like
Save
Share
Report

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 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 :




      <!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>                    

      
      

      Output:
      Before selection:

      After selection of Linux and DBMS section section:

      Note: Use Ctrl + Click to select multiple options.

    • Grid Display –
      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>                    

      
      

      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 :




      <!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>                    

      
      

      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 :




      <!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>                    

      
      

      Output:
      After clicking the Data Structures option one time

      After clicking the Data Structures option twice



Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads