Large blocks of text have been fading away and keeping these hidden behind clickable links is becoming an industry standard. Bootstrap offers a very easy version of this with its “panel” class. And if you want the little “click here icon” to change as the panel expands, you just need to toss a line of JavaScript on top. But the mockup our client handed over included another subtle difference – the clickable title and icon changed color when the panel was open and then reverted back when closed.
I wasn’t quite sure if this was an intentional bit of extra flare they wanted, or if the designer just made this portion into a different color because they could, but coding this isn’t as easy as changing from a black pen to red pen.
I already had the JavaScript on this page to change the Chevron icon from pointing down when closed into pointing up when open, and I already had a class to keep some text red, so I figured I could use the same .click(function) to toggle color changes.
Tools: HTML5, CSS3, Bootstrap4, JavaScript.
