November 24, 2017

UIkit Accordion

❮❮ Previous
Next ❯❯

UIkit Accordion– Accordion is basically list of items which is displayed when we click on the header. Add attribute uk-accordion to ul to create Accordion container and then add accordion title and content. Here in this article we are going to explain how to create Accordion in UIkit framework.

UIkit Accordion | Component | Collapse | Open Example

Add attribute uk-accordion to parent container and add title and content for each item. Here is simple example of Accordion-

UIkit Accordion Example:

<ul uk-accordion>
	<li>
	  <h3 class="uk-accordion-title">Item 1</h3>
	  <div class="uk-accordion-content">Content 1 description.. </div>
	</li>
	<li>
	   <h3 class="uk-accordion-title">Item 2</h3>
	   <div class="uk-accordion-content">Content 2 description.. </div>
	</li>
	<li>
	   <h3 class="uk-accordion-title">Item 3</h3>
	   <div class="uk-accordion-content">Content 3 description.. </div>
	</li>
	<li>
	   <h3 class="uk-accordion-title">Item 4</h3>
	   <div class="uk-accordion-content">Content 4 description.. </div>
	</li>
</ul>

Try it »

  • .uk-accordion-title– This is used to add the title of Accordion item.
  • .uk-accordion-content– This is used to add the content of Accordion item.

If you run the above example it will produce output something like this-

UIkit Accordion Example

No Collapse

By default Accordion items are collapsible. If you want to prevent the item collapse you can assign uk-accordion value – collapsible: false. 

<ul uk-accordion="collapsible: false">...</ul>

Here is complete example-

No Collapse Example:

<ul uk-accordion="collapsible: false">
<li>
  <h3 class="uk-accordion-title">Item 1</h3>
  <div class="uk-accordion-content">
	<p> Description Content 1.</p>
   </div>
</li>
<li>
  <h3 class="uk-accordion-title">Item 2</h3>
   <div class="uk-accordion-content">
	<p> Description Content 2.</p>	
   </div>
</li>
<li>
  <h3 class="uk-accordion-title">Item 3</h3>
   <div class="uk-accordion-content">
	<p> Description Content 3.</p>	
   </div>
</li>
</ul>

Try it »

Open Multiple Items

You can open multiple items at a time by assigning uk-accordion attribute value multiple: true.

Allow Multiple Item Open Example:

<ul uk-accordion="multiple: true">
<li>
  <h3 class="uk-accordion-title">Item 1</h3>
  <div class="uk-accordion-content">
	<p> Description Content 1.</p>
   </div>
</li>
<li>
<li>
  <h3 class="uk-accordion-title">Item 2</h3>
   <div class="uk-accordion-content">
	<p> Description Content 2.</p>	
   </div>
</li>
<li>
  <h3 class="uk-accordion-title">Item 3</h3>
   <div class="uk-accordion-content">
	<p> Description Content 3.</p>	
   </div>
</li>
</ul>

Try it »

Set Open Items

We can use class=”open” to keep the specified item open. You can also keep multiple options open at same time. Just make sure to add multiple: true to accordion.

Set Open Items Example:

<ul uk-accordion>
<li>
	<h3 class="uk-accordion-title">Item 1</h3>
	<div class="uk-accordion-content">
		<p> Description Content 1.</p>
	</div>
</li>
<li class="uk-open">
	<h3 class="uk-accordion-title">Item 2</h3>
	<div class="uk-accordion-content">
		<p> Description Content 2.</p>	
	</div>
</li>
<li>
	<h3 class="uk-accordion-title">Item 3</h3>
	<div class="uk-accordion-content">
		<p> Description Content 3.</p>	
	</div>
</li>
</ul>

Try it »

Options

Option Value Default Description
targets String > * CSS selector of the element(s) to toggle.
active Number false Index of the element to open initially.
collapsible Boolean true This Allows all items to close if they are open.
multiple Boolean false Use this to open multiple items at same time.
animation Boolean true Use this to add animation.
transition String ease The transition to use when revealing items.
duration Number 200 Animation duration in milliseconds.

JavaScript

You can use the following JavaScript component.

Initialize

UIkit.accordion(element, options);

Events

Name Description
beforeshow Fires before an item is displayed. Return false to prevent showing.
show It is Fired after an item is shown.
shown Fires after the item is shown fully.
beforehide Fires before an item is hidden. Return false to prevent hiding.
hide Fires after an item’s hide animation has started.
hidden Fires after an item is hidden completly.

Toggle

UIkit.accordion(element).toggle(index, animate);

Name Type Default Description
index String, Integer, Node 0 Accordion pane to toggle. 0 based index.
animate Boolean true Suppress opening animation by passing false.

Advertisements

Add Comment

📖 Read More


❮❮ Previous
Next ❯❯