Change the GUI

And also how can I put an icon in every title?

I’m not sure why the styles wouldn’t be working for you. Is it possible for you to provide a link for me to take a look at?

As for the icon, you should be able to add the icon as a background-image in your CSS (assuming we can get that part working) like this:

.accordion-title {
  background-image: url("path/to/image.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 60px; /* You'll have to adjust this for the size of your icon image */
}

here https://66.147.244.92/~homecre1/betasite/1665-2/

I’m getting this error when trying to access the page:

[an error occurred while processing this directive]

please try again, here again https://www.homecredit.ph/betasite/1665-2/

I think the issue has to do with a commented block of code in your themes stylesheet. If you look at lines 1698-1701 of the code you’ll see this:

#content {
/*  padding: 20px 0;
    background: #FFF;
}*/

That will leave you with just #content {. If you don’t want that style, you should comment out the entire declaration block, including the selector.

I see. It is possible to have different icon for each accordion? And how to put background only in title?

And how to less the space between to accordion? Disregard the second question above (And how to put background only in title?)

Each accordion has an ID associated with it, so you could add a different background image for each like this:

#item-1 {
    background-image: url("path/to/image-1.png");
}
#item-2 {
    background-image: url("path/to/image-2.png");
}

That will only add the background image on the title of the accordions.

As for the spacing, you can use margins and padding to adjust the spacing between items. I should also note that in most cases WordPress adds paragraph <p> and break tags <br> automatically around shortcodes. I usually use something like this code block in my theme’s functions.php file to address that:

function my_the_content_filter($content) {
	$array = array(
		'<p>['    => '[',
		']</p>'   => ']',
		']<br />' => ']',
		']<br>'   => ']'
	);
	$content = strtr($content, $array);

	return $content;
}
add_filter('the_content', 'my_the_content_filter');

I use this

#item-2 {
background-image: url(“path/to/image-2.png”);
background-repeat: no-repeat;
background-position: left center;
padding-left: 180px;
}

but the image is not displaying

never mind my latest question. I resolved already

After I add this

#item-1 {
background-image: url(“path/to/image-1.png”);
}
#item-2 {
background-image: url(“path/to/image-2.png”);
}

the re-design of accordion is lost

it’s not possible to have two image in one accordion? Like in right side (logo) then left side (arrow icon)

Sorry, please disregard my questions

You got everything working?