I’ve been searching the web for some hours and just can’t seem to find the right way to do this. The thing I want to do is to open up an accordion by using an image.

This is my code for the first image on my website which you can see if you just scroll down a bit. LINK

[block_grid type=”four-up” style=”margin:0;”][accordion][block_grid_item][image type=”” float=”none” src=”http://projectchina.se/2015/wp-content/uploads/2015/02/222.jpg” href=”#x-accordion-inner” class=”py” link=”true”][accordion_item title="Jonathan Roos"]BLABLABLA[/accordion_item][/block_grid_item][/accordion][/block_grid]

As I said before, by clicking the image I would like to be able to open/close the accordion. Do you know how to do this?

Best regards from Sweden!

Thanks for writing in.

You can’t mix both accordion and block grid so it’s not gonna work. Accordion could be inside the block grid item, but accordion shouldn’t wrap block grid item.

And accordion toggles does not accept an image, but just plain text as title.

What you could do is use background image for each of your toggle.

Example, let say you have this accordion (please check how to create the accordion here https://theme.co/x/member/kb/shortcode-walkthrough-accordion/ )

[accordion][accordion_item class="my-background-1"][/accordion]

And we added my-background-1 on first accordion item’s class attribute ( you can use any name you want as long as it’s valid for class name ).

Then we can add this css at customizer’s custom css under Admin > Appearance. This represent your accordion’s first item.

.my-background-1 a{

width: 100px;
height: 100px;
background: url(http://domain.com/image-100x100.jpg);
text-indent: -999999px; /* hide text */
overflow:hidden;

}

Now repeat this for you other accordion’s items. And each should be using unique class names.

Cheers!