Hi all,
I've been thrown into a website project and I'm still learning bits of CSS and HTML, please forgive me if I'm a bit vague or clueless!
I've built a product page that I'm very happy with, it has a function to expand when clicking the "Allergens" paragraph and that makes it show the"Contains milk" parargraph and the can collapse again if the "Allergens" paragraph is clicked again.
I had a few test users complain that it wasn't clear that the paragraph expanded, so I added a font awesome chevron icon (down facing). However I'd really like the font awesome chevron to flip around and face up on click of the "Allergens" Paragraph instead of staying static
I found a bit of code on w3schools(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike) that also had a script added it to my code which is below:
<p><a class="toggleButton" href="#collapseText5" aria-controls="collapseText" aria-expanded="false" data-toggle="collapse">ALLERGENS <i onclick="myFunction(this)" class="fa fa-chevron-down fa-fw pull-right"></i></a></p>
<div id="collapseText5" class="collapse">
<p>Contains Milk.</p>
</div>
<script> function myFunction(x) { x.classList.toggle("fa-chevron-up"); } </script>
With this the Chevron now flips between down and up on click, but only if you click the chevron itself. If I click the "ALLERGENS" paragraph the chevron stays in the same direction.
Can anyone help me in what to do so the chevron icon flips when clicking the paragraph and also retain the function to flip if I click the chevron icon itself?
As mentioned I'm very new to HTML and CSS, so please be patient with me
Forget what I wrote. It won't work. I misread.
Are there more than one collapsible sections on the page?
And how does the toggle() function look?
Hi Both,
Probably easier to show you the page I'm working on:
https://test.harveyandbrockless.co.uk/product/eve-140g/eg227
The class stored in the style sheet just seems to be this, with the last Collapse text having a bit of a variation:
#collapseText6 {
width:100%;
padding-bottom:5px;
.toggleButton {
font-size: 1.0em;
letter-spacing: 2px;
font-weight: bold;
display:block;
width:65%;
}
This has the collapsibles on it and the chevron's spinning on the click of the icon.
Do you need me to show anything else?
Would this work?
That toggle() methos was new to me, couldn't find much documentation about it so I used the old-fashioned approach instead. Also I couldn't find the proper chevron icon entities, so I used a couple of others as placeholders in the CSS. Also I changed the HTML structure a bit.
CSS
Is it a method? I thought it was function written in a way I'm not familiar with.
Thank you. I feel less stupid now. Shared stupidity is half stupidity.
Thanks! I need to do some formatting, but that's perfect : ) thank you for your help.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)