jQuery UI - Tabs and Accordions

Question

1 Answer

Best answer

There are many ways to make tabs and accordions but definitely jQuery and its jQuery UI library package provide us with the fastest and most efficient way to implement these elements.

Tabs

The tabs allow us to group the information on our website by topic, this allows users to get relevant information quickly and easily just by selecting the tab they want.

The tabs method ()

The tabs (options) method declares that an element of the HTML and its content must be displayed in tabs, the parameters of the options is an object that specifies the appearance and behavior of the tabs.
The tabs () method can be used in two ways:

â€¢ $ (selector, context) .tabs (options)
â€¢ $ (selector, context) .tabs ("action", params)

Let's see an example of the implementation of it:

We include the necessary files, the jQuery libraries and the CSS :

<link rel = "stylesheet" href = " http: //code.jquery.c.../jquery-ui.css" />
<script src = " http: //code.jquery.c...1.js"> </ script>
<script src = " http: //code.jquery.c...i.js"> </ script>
<link rel = "stylesheet" href = "/ resources / demos / style.css" />

We create our instance of the tabs () method and associate it with a selector:

<script>
$ (function () {
$ ("#tabs") .tabs ();
});
</ script>

Finally in our HTML we create the content that will be formatted in our tabs, it is important to mention that you must comply with the <div> tags structure then the <ul> tags and finally <div> tags so that the method identifies each tab.

Let's see how this example looks in our browser:

Here the complete code so that they can prove it:

<html lang = "en">
<head>
<meta charset = "utf-8" />
<title> jQuery UI Tabs - Default functionality </ title>
<link rel = "stylesheet" href = " http: //code.jquery.c.../jquery-ui.css" />
<script src = " http: //code.jquery.c...1.js"> </ script>
<script src = " http: //code.jquery.c...i.js"> </ script>
<link rel = "stylesheet" href = "/ resources / demos / style.css" />
<script>
$ (function () {
$ ("#tabs") .tabs ();
});
</ script>
</ head>
<body>

<div id = "tabs">
<ul>
<li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
<li> <a href="#tabs-2"> Proin pain </a> </ li>
<li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
</ ul>
<div id = "tabs-1">
<p> Tab test 1. </ p>
</ div>
<div id = "tabs-2">
<p> Morbi tincidunt, dui sit amet facilisis feugiat, I hate metus gravida before, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Thin fringilla, massa eget luctus ill, metus eros bother lectus, ut tempus eros massa ut pain. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum my adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus. </ P>
</ div>
<div id = "tabs-3">
<p> Tab test 3. </ p>
</ div>
</ div>
</ body>
</ html>

Accordion

Like the tabs, the accordion organizes the information with the particularity that it does by blocks in which only the information of the block that has been selected will be displayed while the others remain hidden.

The accordion () method

The accordion (options) method specifies that an HTML element and its content will be managed as accordion type menus. Like the tabs method, the options will specify the behavior and appearance of the same.
The accordion () method can be used in two ways:
â€¢ $ (selector, context) .accordion (options)
â€¢ $ (selector, context) .accordion ("action", params)
Let's see an example of the implementation of it:

We include the necessary files, the jQuery libraries and the CSS :

We create our instance of the accordion () method and associate it with a selector:

<script>
$ (function () {
$ ("#accordion") .accordion ();
});
</ script>

Finally we create our HTML respecting the structure of a general <div> tag followed by other <div> tags that will serve to identify each block.

Our example will look like this in the browser:

answered Jun 23, 2019 by stackoverflow (3.5m points)
edited Jun 23, 2019

jQuery UI - Tabs and Accordions

Your answer

1 Answer

Your comment on this answer:

Related questions