[post_thumbnail width="125" height="75"]
[post_title]
[excerpt wordlimit=20][more]
[/posts]
```
* In the “Style” —> “Javascript Box”
* ```
```
* And then in the “Style” –> CSS Box..
* ```
.ul, #purple {
border-radius: 10px/10px;
-webkit-border-radius: 10px/10px;
-moz-border-radius: 10px/10px;
-ms-border-radius: 10px/10px;
-o-border-radius: 10px/10px;
background: #7220c9;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.9);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.9);
-ms-box-shadow: 0 0 10px rgba(0,0,0,0.9);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.9);
/* No borders set */
}
.li, #whitepurple {
color: black; /* text color is black */
font-family: Arial;
font-size: 14px;
background: white; /* Content, padding will be white */
border-radius: 10px/10px;
-webkit-border-radius: 10px/10px;
-moz-border-radius: 10px/10px;
-ms-border-radius: 10px/10px;
-o-border-radius: 10px/10px;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-radius: 10px/10px;
-webkit-border-radius: 10px/10px;
-moz-border-radius: 10px/10px;
-ms-border-radius: 10px/10px;
-o-border-radius: 10px/10px;
border-style: none;
border-width: medium; /* sets border width on all sides */
border-color: #27d130;
}
```
* PLEASE NOTE: This is just an example for beginners and a bit “rough” but is working
with WordPress 4.0 and Twentyfourteen Theme.
* I actually have it pretty nice using a couple of other plugin’s… but I just wanted
to put up an example for Javascript…
AND I’m a just a beginner with a lot of
this stuff so I know I have things incorrect but this is just an example that
can be improved by others or to learn from for other beginners.
* ANOTHER NOTE: You can only have one instance of this Accordion Per Page… BUT
if you change the Javascript for EACH “List” you can have multiple Accordions…
that is…
For a second Accordion “List” on the same page this should work in
the other “List”
* ```
```
* AND then in the Template… add the different “-2” to the variables.. to reflect
the “second” accordion…
* HOPEFULLY I haven’t blundered this help file… But I have tested.
* [https://wordpress.org/plugins/w4-post-list/](https://wordpress.org/plugins/w4-post-list/)
Viewing 2 replies - 1 through 2 (of 2 total)
* Plugin Author [Shazzad Hossain Khan](https://wordpress.org/support/users/sajib1223/)
* (@sajib1223)
* [11 years, 6 months ago](https://wordpress.org/support/topic/example-javascript-accordioncsstemplate/#post-5511223)
* It’s great. But we need a live example ? Could you provide a link where people
can see it live ? also we will be putting it on our site as a reference.
* Thanks for your work, mate 🙂
* Thread Starter [Robswaimea](https://wordpress.org/support/users/robswaimea/)
* (@robswaimea)
* [11 years, 6 months ago](https://wordpress.org/support/topic/example-javascript-accordioncsstemplate/#post-5511270)
* Note: there are other Accordion javascripts available.. and Collapse’able Plugins.
Some have conflicts.. some don’t. And some require additional plugin’s like Outbridges
Nested Plugin for Shortcodes (this doesn’t).
* Note: because I am a beginner with a lot of this.. (CSS etc) there may be errors
or better ways of formating… so keep in mind this is a work in progress.
* In the above example… take out the [post_thumbnail width=”125″ height=”75″]
and it will display nicely….
* NOTE: this example has the WIDTH set to width: 350px in the CSS in .ul, #purple
area.
* The PURPOSE of the following information is because of the narrower 350px width
and LONG Post-Titles wrapping around the Thumbnail Image.
* Thumbnails and for a LONG Post Title to display nicely (right of image) around
the image
you will need the following adjustments.
* In the following example…
I have my “newer” Thumbnails in Media set to 125width
and 75 height.. So that they display nicely… For some reason… my older thumbnails
that were set 150×150 do not get displayed nicely even if I set the [post_thumbnail
width=”125″ height=”75″]
* Example URL
[http://goo.gl/80ZPrX](http://goo.gl/80ZPrX)
* You can see in the example URL the difference.
In THIS example with the “Accordion”
effect… 1.) for the Text ie: [post-title] to wrap around the image you need to
set the image to align to the left by ADDING this to the above example (original
above) in the CSS….
* ```
.img, #imgpurple {
float:left;
}
```
* 2.) And then call the “image left” in the