How to create list in ‘accordion’ style

Sometimes it is a good idea to create a list of names or logos, for example on a page with sponsors for an event. You can use an ‘accordion’ type of list to do this.

Note

Please note that this requires the installation of the Shortcodes plugin (which is installed on most sites) and some code. By using the code below you can easily create an accordiion list yourself.

By clciking the + sing the accordion opens and more information will become visible.

Result

accordion style list

 

 

 

 

 

 

 

 

 

 

Code

<— tab 1 —>

[su_accordion]
<a href=”http://www.doi-web.com” target=”_blank” rel=”noopener”><img class=”size-medium” src=”https://test.kcimediagroup.com/hew/wp-content/uploads/sites/17/2021/07/1.jpg” alt=”” width=”300″></a>

[su_spoiler title=”More information: Doi Seisakusho Co., Ltd. / Seal For Life Industries” open=”no” style=”default” icon=”plus-circle” anchor=”” anchor_in_url=”” class=””]

<h4>Company profile</h4>
STOPAQ anti-corrosion system is worldwide known new technology which has “visco-elastic” function and is in conformity to ISO. STOPAQ Wrappingband CZHT can be installed in wider temperature range below 120 c degree.
STOPAQ Aquastop 2100 which made of visco-erastic polyolefin plastic has been used for variety of sealing requirement in Japan.
DOI group, that has the mission against “Aging of Infrastructure”, is the distributor and technic supporter in Japan.

<h4>Exhibiting items</h4>
STOPAQ
STOPAQ Wrappingband series / Anti-Corrosion tapes
STOPAQ Aquastop 2100 / Watersealing module

<h4>Website</h4>
<a href=”http://www.sealforlife.com/” target=”_blank” rel=”noopener”>Sealforlife industries</a>
<a href=”http://www.doi-web.com/” target=”_blank” rel=”noopener”>DOI SEISAKUSHO Co., Ltd</a>
Contact: Doi Seisakusho Co., Ltd., Mr. Sekiguchi
<a href=”mailto://sekiguchi@doi-web.com”>sekiguchi@doi-web.com</a>
<img src=”https://test.kcimediagroup.com/hew/wp-content/uploads/sites/17/2021/07/mapj2021-6428-doi-seisakushu.jpg” alt=”doi-seisakushu” />

[/su_spoiler]

<— end tab 1 —>

<— tab 2 —>

<a href=”https://test.kcimediagroup.com/hew/sponsoren/#jgc” rel=”noopener”><img class=”size-medium” src=”https://test.kcimediagroup.com/hew/wp-content/uploads/sites/17/2021/07/2.jpg” alt=”” width=”300″></a>

[su_spoiler title=”More information: JGC Group” open=”no” style=”default” icon=”plus-circle” anchor=”jgc” anchor_in_url=”yes” class=””]

<h4>Company profile</h4>
In the over 90 years since its founding in 1928, JGC has expanded its business domain from plant and facility engineering, equipment procurement, construction and maintenance in the fields of petroleum, natural gas and petrochemicals to infrastructure areas including power generation, non-ferrous metals, life sciences and healthcare.
The JGC Group delivers services such as predicting operational trouble through the analysis of operating data and other big data, efficient plant maintenance, and contributes to the lift of business value for plant owners.
<h4>Exhibiting items</h4>
Smart Maintenance Service (INTEGNANCE), Plant Diagnosis and Improvement with Simulation Technology (PLANT PLUS)
<h4>Website</h4>
<a href=”https://www.jgc.com/en/” target=”_blank” rel=”noopener”>JGC Group</a>
Contact: Kanamaru Shinichiro
<a href=”mailto://kanamaru.shinichiro@jgc.com”>kanamaru.shinichiro@jgc.com</a>
<img src=”https://test.kcimediagroup.com/hew/wp-content/uploads/sites/17/2021/07/mapj2021-6429-jgc.jpg” alt=”JGC Group” />

[/su_spoiler]

<— end tab 2 —>

[/su_accordion]

Was this article helpful?

Yes No

Related Articles