DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Mule 4 Custom Connector and Icon
  • The Right Way to Use Favicons
  • How to Make Icons for Applications on Android and iOS
  • Step-by-Step Guide to Use Anypoint MQ: Part 1

Trending

  • Docker and Kubernetes Transforming Modern Deployment
  • Selecting the Right Automated Tests
  • Demystifying Enterprise Integration Patterns: Bridging the Gap Between Systems
  • Unraveling Lombok's Code Design Pitfalls: Exploring Encapsulation Issues
  1. DZone
  2. Coding
  3. Frameworks
  4. Change the default Icon on your jQuery UI Accordion

Change the default Icon on your jQuery UI Accordion

Hajan Selmani user avatar by
Hajan Selmani
·
Feb. 15, 11 · News
Like (1)
Save
Tweet
Share
35.76K Views

Join the DZone community and get the full member experience.

Join For Free

i've got this question in one of my previous blogs posted here (the same blog is posted on codeasp.net too), dealing with jquery ui accordion and i thought it's nice to recap this in a blog post so that i will have it documented for further reference.

in the previous blog, i'm creating tabs content navigation using jquery ui accordion. so, it's quite simple code and all i do there is calling accordion() function.

<script language="javascript" type="text/javascript">    $(function() {        $("#products").accordion();    });</script>


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.

1. using existing jquery ui theme classes

- open the follownig link: http://jqueryui.com/themeroller/#icons

you will see the icons available in the jquery ui theme. mouse over on each icon and you will see the class name for each icon. as you can see, each icon has class name constructed in the following way: ui-icon-<name>

all icons in one image

- in our example, i will use ui-icon-circle-plus and ui-icon-circle-minus (plus and minus icons).

- lets set the icons

<script language="javascript" type="text/javascript">    $(function() {        //initialize accordion                $("#products").accordion();        //set accordion header options        $("#products").accordion("option", "icons",        { 'header': 'ui-icon-circle-plus', 'headerselected': 'ui-icon-circle-minus' });    });</script>

from the code above, you can see that i first intialize the accordion plugin, and after i override the default icons with the ui-icon-circle-plyus for header and ui-icon-circle-minus for headerselected.

here is the end result:

so, now you see we have the plus/minus circle icons for the default header state and the selected header state.

2. add my own icons

- if you want to add your own icons, you can do that by creating your own custom css classes.

- lets create classes for both, the header default state and header selected state

<style type="text/css">    .defaulticon    {        background-image: url(images/icons/defaulticon.png) !important;        width: 25px;        height: 25px;    }    .selectedicon    {        background-image: url(images/icons/selectedicon.png) !important;        width: 25px;        height: 25px;    }</style>


as you can see, i use my own images placed in images/icons/ folder

- default icon
- selected icon

one very important thing to note here is the !important key added on each background-image property. it's like that in order to give highest importancy to our image so that the default jquery ui theme icon images will have less importancy and won't be used.

and the jquery code is:

<script language="javascript" type="text/javascript">    $(function() {        //initialize accordion                $("#products").accordion();        //set accordion header options        $("#products").accordion("option", "icons",        { 'header': 'defaulticon', 'headerselected': 'selectedicon' });    });</script>


note: for both #1 and #2 cases, we use the class names without adding . (dot) at the beginning of the name (as we do with selectors). that's because the the header and headerselected properties accept classes only as a value, so the rest is done by the plugin itself.

the complete code with my own custom images is:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="head1" runat="server">    <title>jquery accordion</title>    <link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/blitzer/jquery-ui.css"        rel="stylesheet" />    <style type="text/css">        .defaulticon        {            background-image: url(images/icons/defaulticon.png) !important;            width: 25px;            height: 25px;        }        .selectedicon        {            background-image: url(images/icons/selectedicon.png) !important;            width: 25px;            height: 25px;        }    </style>    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>    <script language="javascript" type="text/javascript">        $(function() {            //initialize accordion                        $("#products").accordion();            //set accordion header options            $("#products").accordion("option", "icons",            { 'header': 'defaulticon', 'headerselected': 'selectedicon' });        });            </script></head><body>    <form id="form1" runat="server">    <div id="products" style="width: 500px;">        <h3>            <a href="#">                product 1</a></h3>        <div>            <p>                lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus in tortor metus,                a aliquam dui. mauris euismod lorem eget nulla semper semper. vestibulum pretium                rhoncus cursus. vestibulum rhoncus, magna sit amet fermentum fringilla, nunc nisl                pellentesque libero, nec commodo libero ipsum a tellus. maecenas sed varius est.                sed vel risus at nisi imperdiet sollicitudin eget ac orci. duis ac tristique sem.            </p>        </div>        <h3>            <a href="#">                product 2</a></h3>        <div>            <p>                aliquam pretium scelerisque nisl in malesuada. proin dictum elementum rutrum. etiam                eleifend massa id dui porta tincidunt. integer sodales nisi nec ligula lacinia tincidunt                vel in purus. mauris ultrices velit quis massa dignissim rhoncus. proin posuere                convallis euismod. vestibulum convallis sagittis arcu id faucibus.            </p>        </div>        <h3>            <a href="#">                product 3</a></h3>        <div>            <p>                quisque quis magna id nibh laoreet condimentum a sed nisl. in hac habitasse platea                dictumst. proin sem eros, dignissim sed consequat sit amet, interdum id ante. ut                id nisi in ante fermentum accumsan vitae ut est. morbi tellus enim, convallis ac                rutrum a, condimentum ut turpis. proin sit amet pretium felis.            </p>            <ul>                <li>list item one</li>                <li>list item two</li>                <li>list item three</li>            </ul>        </div>    </div>    </form></body></html>

the end result is:

JQuery UI Icon

Published at DZone with permission of Hajan Selmani, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Mule 4 Custom Connector and Icon
  • The Right Way to Use Favicons
  • How to Make Icons for Applications on Android and iOS
  • Step-by-Step Guide to Use Anypoint MQ: Part 1

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: