LearnDash Course Content Expand/Collapse Customizations

Updated 2 years ago
by Dave Warfel

This group of CSS snippets will focus on customizing various things about the LearnDash course content expand/collapse functionality. There are quite a few different ways we can customize this, and I’ll walk you through several options.

Example of expand/collapse arrow customization in LearnDash course content

Remove the “Expand” text next to the arrows

By default, the LearnDash course content list—displayed automatically at the bottom of course pages—shows the word “Expand” next to the arrow that opens & closes a lesson (to display the topics beneath it). We can remove this word to leave only the arrow.

.ld-item-list-items .ld-expand-button .ld-text {
	display: none;
}

We then need to add a little spacing to the arrow so it doesn’t hit the edge of the container. We do that with a margin-right on the arrow itself.

.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon {
	margin-right: 15px;
}

Remove the colored circle background on the arrow

This will leave just the arrow, and remove the circle behind it.

.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon {
	background: 0;
	color: #00a2e8;
}
.learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-icon {
	background: 0;
}

In the first piece of CSS, you can change the color value to whatever color you’d like your arrows.

The second piece of CSS is to ensure the circle doesn’t appear again on hover.

Arrow hover & open color

If you want to change the arrow color on hover, and when the corresponding section is open/expanded, you can use this CSS:

.learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-icon {
	color: orange;
}
.learndash-wrapper .ld-expand-button.ld-button-alternate.ld-expanded .ld-icon {
	color: orange;
}

Change the word orange to any hexadecimal or other color value you’d like.

Rotate the arrow

I think the default orientation of the arrow works well—up when closed, down when open. But you might want to have an arrow pointing sideways when closed, and down when open. We can add some CSS to rotate the arrow.

.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon {
	transform: rotate(90deg);
}
.learndash-wrapper .ld-expand-button.ld-button-alternate.ld-expanded .ld-icon {
	transform: rotate(0deg);
}

This example will rotate the arrow to the left when closed, and down when open. Change 90deg to 270deg if you want the arrow pointing to the right.

Complete Code

It’s best to consolidate CSS code whenever possible. I’ve put it all together in its most consolidated form here. Feel free to delete specific lines that you don’t want to use, or adjust values to get your desired outcome.

.ld-item-list-items .ld-expand-button .ld-text {
	display: none;
}
.learndash-wrapper .ld-expand-button.ld-button-alternate .ld-icon {
	margin-right: 15px;
	background: 0;
	color: #00a2e8;
	transform: rotate(270deg);
}
.learndash-wrapper .ld-expand-button.ld-button-alternate:hover .ld-icon {
	background: 0;
	color: orange;
}
.learndash-wrapper .ld-expand-button.ld-button-alternate.ld-expanded .ld-icon {
	transform: rotate(0deg);
	color: orange;
}

All CSS code should either be placed in a child theme’s main CSS file (typically style.css), or the Additional CSS area of the WordPress Customizer.

How to Add CSS to Your Site

Forum Rules

Be Kind & Patient

We’re here to learn and/or help each other. Please don’t be mean, rude, or condescending. Treat all members the way you should be treating dogs and your elders—with the utmost love & respect.

External Links

✅ Other websites that add value, help solve problems & contribute to the discussion. ❌ Affiliate links are prohibited. (Site owners may use affiliate links to help support the site.)

Promotion

✅ You may promote your own products/services if they are relevant to an existing discussion. You must disclose your relationship with the product(s).
❌ You may not create new posts simply to promote your products.

Non-LearnDash Topics

❌ General (free) Forum: Only LearnDash-specific topics are allowed.
✅ Premium Forums: You are allowed to post other questions tangentially related to LearnDash. Please use the appropriately named forum. If it doesn’t exist, use the “LearnDash Integrations” forum.

Our Right to Remove

We reserve the right to remove any content, at any time, for any reason. We can also merge one post with another. We will exercise caution when removing content and always try to provide an explanation.