+3 votes
192 views
jQuery UI - Tabs and Accordions

in JavaScript by (551k points)
reopened | 192 views

1 Answer

+4 votes
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:


image


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:


image


by (3.5m points)
edited

Related questions

+5 votes
1 answer
asked Jun 24, 2019 in JavaScript by backtothefuture (551k points) | 241 views
+5 votes
1 answer
asked Jun 24, 2019 in JavaScript by backtothefuture (551k points) | 188 views
+5 votes
1 answer
asked Jun 23, 2019 in JavaScript by backtothefuture (551k points) | 201 views
+3 votes
1 answer
asked Jun 23, 2019 in JavaScript by backtothefuture (551k points) | 198 views
+4 votes
1 answer
asked Jun 23, 2019 in JavaScript by backtothefuture (551k points) | 186 views
Sponsored articles cost $40 per post. You can contact us via Feedback
10,632 questions
10,764 answers
510 comments
3 users