- jQuery UI Cookbook
- Adam Boduch
- 214字
- 2021-08-13 16:40:49
Controlling spacing with themes
The space between accordion sections is controlled by the CSS theme framework. In particular, the visual structure for the accordion is defined by a set of CSS rules that can be modified to control the spacing between accordion sections. We could override the accordion theme CSS to adjust for more or less spacing between sections.
How to do it...
We're going to supply an additional CSS module to our UI—one that overrides the accordion structure supplied in the theme we happen to be using. There's no need to fret, however, our change is a simple one. We're going to update the margin-top
property. In a new CSS file called theme.accordion.css
, let's add the following style rules:
.ui-accordion .ui-accordion-header { margin-top: 4px; }
Now that we have the CSS, we need to include it in our HTML header. It should look something like this:

How it works...
We're copying the same CSS selector as is found in any jQuery UI theme. The particular property we've just changed alters the space between the accordion sections. Since we're overriding the default theme value, it's important to include our CSS files after the default theme file. This allows us to override the default theme instead of the default theme overriding our modifications.
- Windows Server 2019 Cookbook
- Implementing Cisco UCS Solutions
- Linux從零開始學(視頻教學版)
- Persistence in PHP with the Doctrine ORM
- Mastering Distributed Tracing
- Linux使用和管理指南:從云原生到可觀測性
- Windows 7案例教程
- INSTANT Galleria Howto
- 新編電腦辦公(Windows 10+ Office 2013版)從入門到精通
- Introduction to R for Quantitative Finance
- CentOS 6 Linux Server Cookbook
- Learn CUDA Programming
- Linux應用大全 基礎與管理
- Linux內核API完全參考手冊(第2版)
- Windows網絡編程(第2版)