Web design and hosting, database, cloud and social media solutions that deliver business results
  • Business Solutions
    • Robotic Process Automation
    • Bespoke Software
    • Database Services
      • Data Integration
      • Datawarehouse Services
      • Power BI
      • Server Upgrade and DBA Services
    • Web Services
      • Logo Design
      • Payment Gateways
      • Web Localisation and Translation
      • Web Site Optimisation
      • Web Site Security
      • Technical Tools
    • Cloud Services
      • Amazon Web Services
      • Google Cloud Services
      • Microsoft Azure
    • Microsoft 365
      • Enabling the Multi Factor Authentication Application
      • Office 365 DNS Settings Generator
    • IT Hardware
    • Social Media Services
  • Academy
    • Our Test Environment
    • Learning Databases
      • The Basics
      • Get Open Query
      • SQL Server Data
      • SQL Server Maintenance
      • Using SQL Server Dates
      • Using SQL Server Functions
      • Using SQL Server Pivot-Unpivot
      • Technical Tools
    • Learning Web Design
      • Building Ousia Content Management System
      • Using ASP-NET
      • Using CSS
      • Using JavaScript
    • Learning Cloud and IT Services
      • Task Scheduler Error 2147943645
      • Blocking Blank Senders
      • Requesting SSL and Generation of PFX file in OpenSSL Simple Steps
    • Using Social Media
      • Asking for a Google Review
      • Changing a Facebook account from personal to business
      • Choosing where to focus Social Media effort
      • Social Media Image Sizes
      • Using Meta Data to set Social Media Images
  • About
    • Blog
      • Building an entry level gaming machine
      • Google Core Update Jan 2020
      • Hot Chilli Internet Closure
      • How To Choose Content For Your Website Adverts Leaflets
      • Preventing Online Scam
      • Skimmers of the gig economy
      • The most annoying things about websites on the Internet
      • Top 5 websites for free Vector Graphics
    • Careers
      • Translator English-Japanese
      • Translator English-Portuguese
      • Translator English-Spanish
      • Translator English-Turkish
    • Portfolio
    • Regulatory
    • Team
      • Chester Copperpot
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
Deutsch (DE)English (EN-US)English (EN-GB)हिंदी (HI)italiano (IT)日本語 (JA)Türk (TR)

CSS Styling for AJAX Accordion Control

Some simple CSS styling rules for an AJAX Accordion Control

AJAX

The AJAX Accordian Panel is a great little too that comes as part of the AJAX Toolkit. It saves a lot of space while still allowing you to condense a lot of information into a single page.
Before using this, it may we worth checking up on the following. AJAX Toolkit
The control requires you to download and add to Visual Studio, I won't go into that in this article though.

The control is made of the following parts. Your content for each goes in between the Content Tags.

HTML

<asp:Accordion ID="Accordion1" runat="server" CssClass="accordion" ContentCssClass="accordionContent" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"> <Panes> <asp:AccordionPane ID="PaneOne" runat="server" CssClass="accordion"> <Header>Pane1</Header> <Content> </Content> </asp:AccordionPane> <asp:AccordionPane ID="PaneTwo" runat="server" CssClass="accordion"> <Header>Pane2</Header> <Content> </Content> </asp:AccordionPane> </Panes></asp:Accordion>
This is the code I have used to style the accordian pane on my login page, by using the CSS you only need to set the style once, and that is setting the style as CssClass="accordion". You can also see there are three other sections set above.
A breakdown of the code as follows;
accordian is the outer container, all I am setting here are the border radius and widths.

CSS

.accordion{width: 98%;margin: auto;border-radius: 5px;moz-border-radius: 5px;border: 1px solid #6C5A39;background-color: #DED3BE;}
Accordian header is the style for all un selected headers.

CSS

.accordionHeader{border-radius: 5px;moz-border-radius: 5px;background-color: #DED3BE;font-weight: bold;text-align: center;padding: 0px 0px 2px 0px;}
This is the selected header, by setting this as a different colour the user can easily identify what tab they have selected.

CSS

.accordionHeaderSelected{border-top-right-radius: 5px;border-top-left-radius: 5px;moz-border-top-right-radius: 5px;moz-border-top-left-radius: 5px;border-bottom: 1px solid #6C5A39;background-color: #D1C2A5;font-weight: bold;color: #000000;text-align: center;padding: 0px 0px 2px 0px;}
Now we can add some styling to the content area, this sets the colour for the background of the selected tab.

CSS

.accordionContent{border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;moz-border-bottom-right-radius: 5px;moz-border-bottom-left-radius: 5px;background-color: White;}
The code above is obviously just the beginning of what you could do.

Author

Helpful?

Please note, this commenting system is still in final testing.
Copyright Claytabase Ltd 2020

Registered in England and Wales 08985867

Site Links

RSSLoginLink Cookie PolicySitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.co.ukClaytabase Ltd, Unit 3d, Rink Road Industrial Estate, PO33 2LT, United Kingdom

Partnered With

The settings on this site are set to allow all cookies. These can be changed on our Cookie Policy & Settings page.
By continuing to use this site you agree to the use of cookies.
Ousia Logo
Logout
Ousia CMS Loader