Change Accordion arrow position

Related searches

I am new to jquery Mobile. I created an Accordion, But I want the arrow on it to appear on Right side. Can anyone help me?

Below is my code.

<div class="accordion" id = "accordion">



body {
    background-color: #333333;
    .accordion h3 a {
    .accordion h3 a .ui-icon {

Then i loaded my Accordion with arrays

for (i=0;i<names.length;i++)
      var newDiv = "<h3>"+names[i]+"</h3><p>"+subnames[i]+"</p>";


In the jQuery Mobile collapsible widget, you can set data-iconpos="right" to move the icon to the right side:

    <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 1</h3>

            <p>I'm the collapsible content for section 1</p>
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 2</h3>

            <p>I'm the collapsible content for section 2</p>
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 3</h3>

            <p>I'm the collapsible content for section 3</p>

Here is a DEMO

For dynamically added content:

   var thedynamiccontent = '<div data-role="collapsible" data-iconpos="right"><h3>Another Section</h3><p>Hello from dynamic added section</p></div><div data-role="collapsible" data-iconpos="right"><h3>Another Section 2</h3><p>Hello from dynamic added section 2</p></div>'; 

dynamic DEMO

NOTE: you can also change the icons used: data-collapsed-icon="arrow-r" data-expanded-icon="arrow-u"

Accordion Arrows positioning inside div, This included the span and line break, which gave it that odd position. Best. Edit for response: So, to get those arrows to change, we need to� Accordion Buttons. You can use any HTML element to open the accordion content. We prefer a button with a w3-block class, to span the entire width of the page (100% width). Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want them left-aligned instead. However, you do not have to follow our approach

I think something like what you got should work:

.accordion h3 a .ui-icon {

Please make sure you are executing or loading your custom CSS after the jQM-CSS. You could also try the !important statement:

.accordion h3 a .ui-icon {
    float:right !important;

Lightning Accordion: changing the arrow location, You can use the css order property and apply that property to the children like this: .THIS .slds-accordion__summary-heading > button > span { order: 1; } . outline - used to change the default behavior of showing an outline when focused on a details element list-style - the standard way to control the default arrow displayed beside the summary border styles - can be (ab)used into making our arrow; also will use it around the details as an example of styling based on open/closed state

This worked for me.

.ui-accordion .ui-accordion-header .ui-icon { 
    position: absolute; 
    left: 100%; 
    margin-left: -30px; 
    top: 50%; 
    margin-top: -8px; 
.ui-accordion-icons .ui-accordion-header a { 
    padding-left: 1em; 

Position of arrow in accordion - Support, Hi. How I can change position o arrow in accordion item? Default is left, but I need right (and rotate 180 deegres). The default image icons for each item is the arrow. The accordion uses the right arrow and down arrow images. So, what we should do in order to change them? JQuery UI Accordion contains option with name icons that has header and headerSelected properties. We can override them with either the existing classes from jQuery UI themes or with our own.

Designing The Perfect Accordion — Smashing Magazine, Once the category is expanded, the icon should change to indicate Nevermind the choice of icon or its position, whenever an accordion is� In Bootstrap 4, there is no default option for changing (-, +) symbol with a button accordion. Hence it can be done by using jQuery. The Following Approach will explain clearly.

Accordion Widget, ui-accordion-header-icon : Icon elements within each accordion header. with the classes option specified, changing the theming for the ui-accordion class:� Accordion Sidebar Menu with CSS and jQuery; jQuery Accordion Plugin Expand all / Open one at a Time; jQuery Responsive Vertical Tabs to Accordion; Bootstrap 4 Accordion with Arrow up and Down; jQuery Easy Accordion Plugin - monica.js; Horizontal Accordion Slider for jQuery - liteAccordion; Responsive Accordion with jQuery and CSS3 - Accordable.js

Jennair: Accordion signaled by caret icon Bolé Road Textiles: accordion signaled by plus icon Ferrari: accordion signaled by arrow icon Braun: accordion with no signifier icon. We performed a quantitative study to find out which of these icons is the most effective at signaling that it will open an accordion. Methodology. Materials.

  • Post your CSS and some more HTML
  • <style> body { background-color: #333333; .accordion h3 a {width:50%} .accordion h3 a .ui-icon {float:right} } </style>
  • This isn't related to jQM. Please clarify your question.