[Pro] Question re accordion for Walter

Freeway
1

Hi Walter I’ve used your accordion with arrows example and code to create my own and all working great but I wanted to ask how I would use a custom image in place of the unicode arrows?

Thanks
Dave

http://scripty.walterdavisstudio.com/accordion-with-disclosure-triangles.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

That’s relatively easy. Generated content can just be empty boxes – you can set the content attribute to ‘’ (two single-quotes) and that gives you no text content. Then give the box some shape with width and height, and finally, set a background image on it. That will get you exactly what you want. If you use the background-size attribute, then you can make your images double-size, and shrink them to fit, resulting in “Retina” resolution, so it looks as sharp as the Unicode trick.

#item1 h2:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 6px;
  top: 0px;
  background-image: url(path/to/closed.png);
  background-position: center center;
  background-size: contain;
}
#item1 h2.open:after {
  background-image: url(path/to/open.png);
}

Walter

On Mar 11, 2016, at 4:43 AM, Dave Dunning email@hidden wrote:

Hi Walter I’ve used your accordion with arrows example and code to create my own and all working great but I wanted to ask how I would use a custom image in place of the unicode arrows?

Thanks
Dave

http://scripty.walterdavisstudio.com/accordion-with-disclosure-triangles.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

On 11 Mar 2016, 1:43 pm, waltd wrote:

That’s relatively easy. Generated content can just be empty boxes – you can set the content attribute to ‘’ (two single-quotes) and that gives you no text content. Then give the box some shape with width and height, and finally, set a background image on it. That will get you exactly what you want. If you use the background-size attribute, then you can make your images double-size, and shrink them to fit, resulting in “Retina” resolution, so it looks as sharp as the Unicode trick.

#item1 h2:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 6px;
  top: 0px;
  background-image: url(path/to/closed.png);
  background-position: center center;
  background-size: contain;
}
#item1 h2.open:after {
  background-image: url(path/to/open.png);
}

Walter

On Mar 11, 2016, at 4:43 AM, Dave Dunning

Thanks I’ll give that a try later, much appreciated.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options