內容簡介
如果要使手風琴以您想要的方式出現，您需要添加自己的樣式。
此外，本外掛讓您在文章和頁面中加入手風琴。
您可以使用以下 shortcode：
[accordions]
[accordion title="標題1"] 標簽內容 [/accordion]
[accordion title="標題2"] 另一個標簽內容 [/accordion]
[/accordions]
這將產生以下 HTML:
<div id="random-accordion-id-872" class="accordions-shortcode">
<h3 id="title1-0" ><a href="#title1-0">標題1</a></h3>
<div class="accordian-shortcode-content" >
某些內容<br />
</div>
<h3 id="title2-1" ><a href="#title2-1">標題2</a></h3>
<div class="accordian-shortcode-content " >
某些內容<br />
</div>
</div>
其他您可以在 shortcode 中使用的屬性：
[accordions autoHeight=’true’ disabled=’false’ active=0 clearStyle=false collapsible=false fillSpace=false ]
[accordion title=’標題1′ class=’new-class’]
某些內容
[/accordion]
[accordion title=’標題2′ class=’new-class’]
某些內容
[/accordion]
[/accordions]
CSS範例:
以下是一些示例 CSS:
您也可以到 http://jqueryui.com/themeroller/ 查找，此外採用jQuery UI 生成手風琴。
.ui-accordion-header{
margin:5px 0 0;
}
.ui-accordion-header a{
padding:5px 12px;
background: #CCC;
color:#FFF;
display:block;
}
.ui-accordion-header.ui-state-active a,
.ui-accordion-header a:hover{
background-color: #DDD;
}
.ui-accordion-content{
padding-top:10px;
}
外掛標籤
開發者團隊
原文外掛簡介
To make the accordions appear the way you want you need to add your own styling to them
Lets you add accordion to your post and pages.
By using the following shortcodes
[accordions]
[accordion title="title1"] tab content [/accordion]
[accordion title="title2"] another content tab [/accordion]
[/accordions]
will generate the following html.
Additional attributes that you could pass into the shortcode
[accordions autoHeight=’true’ disabled=’false’ active=0 clearStyle=false collapsible=false fillSpace=false ]
[accordion title=’title1′ class=’new-class’]
Some Text
[/accordion]
[accordion title=’title2′ class=’new-class’]
Some Text
[/accordion]
[/accordions]
Sample CSS
Here is some sample css to get you started.
Another place to look for it would be the http://jqueryui.com/themeroller/, The shortcode used the jQuery UI to generate the accordion.
.ui-accordion-header{
margin:5px 0 0;
}
.ui-accordion-header a{
padding:5px 12px;
background: #CCC;
color:#FFF;
display:block;
}
.ui-accordion-header.ui-state-active a,
.ui-accordion-header a:hover{
background-color: #DDD;
}
.ui-accordion-content{
padding-top:10px;
}
