You probably won’t be able to achieve the two column layout with the title on the left and the content on the right. If you are ok with keeping the title above the content, this should help get you started:
.accordion-title {
color: #fff;
margin: 0;
padding: 20px;
cursor: pointer;
}
.accordion-title.open {
cursor: default;
}
.accordion-content {
padding: 20px;
}
#accordion-1-t1,
#accordion-1-c1 {
background-color: #1562a8;
}
#accordion-1-t2,
#accordion-1-c2 {
background-color: #eccb0c;
}
You’ll also probably want to add something like this to your theme’s functions.php file:
/**
* Fixes empty <p> and <br> tags showing before and after shortcodes in the
* output content.
*/
function pb_the_content_shortcode_fix($content) {
$array = array(
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']',
']<br>' => ']'
);
return strtr($content, $array);
}
add_filter('the_content', 'pb_the_content_shortcode_fix');
As the comment mentions, it fixes the empty paragraph and break tags that show up around shortcodes by default. It should help fix your spacing issues.
Always make sure you back everything up before editing either of those files though!
Hi Phil,
You’re a STAR!!! Thank you so so much!
I placed your codes as you said and it works almost perfect link
I have an idea hove to make this look like two coloumns, but i need an aditional little bit of your help 😉
If i can use pictures instead title text, i mean if i place a 1st picture in a closed accordion title (with background color and title in a picc), and the 2nd picture in a open/expanded accordion title (onli background color on a pic without the title), then i can place a photo in a accordion content before the scripts with same background color as acc.title and the title on it.
So all i need from you is if you can help me placing photos in a closed and opened accordion title places (if it’s possible)
Thank you so much in advance.
Regards,
Dario
By the way i’ve wrote a review and gave you 5 stars for your amazing work!
You could use background images on the titles:
.accordion-title {
background-image: url("path/to/closed/image.jpg");
}
.accordion-title.open {
background-image: url("path/to/open/image.jpg");
}
You might also have to hide the text of the title itself:
.accordion-title {
text-indent: -9999px;
}
Hi,
Thank you again for your help. We are almost there.
Can we divide the css for the titles for the 1st and the 2nd accordion?
I need 2 different photos for 2 titles, i mean the 1st title will use form_rent_closed_large.jpg and form_rent_open_bar.jpg, the 2nd title will use form_tr_closed_large.jpg and form_tr_open_bar.jpg as background pictures.
I know I’m annoying you, but I know you’re the BEST!
Regards,
Dario
You can use the unique ID’s for each title:
/* First title (see t1) */
#accordion-1-t1 {
background-image: url("path/to/closed/form_rent_closed_large.jpg");
}
#accordion-1-t1.open {
background-image: url("path/to/closed/form_rent_open_bar.jpg");
}
/* Second title (see t2) */
#accordion-1-t2 {
background-image: url("path/to/closed/form_tr_closed_large.jpg");
}
#accordion-1-t2.open {
background-image: url("path/to/closed/form_tr_open_bar.jpg");
}
Make sure you update the path to the actual image.
Thank you again.
You made my day, again 😉
I’ve also putted the “display: none;” under accordion.open and now I need to play a little around the form alignment and it would be perfect.
Thank you again so so much for your quick and professional support.
Kind regards,
Dario
