JavaScript to change Chevron icon direction only changing it when clicking the chevron icon |
JavaScript to change Chevron icon direction only changing it when clicking the chevron icon |
Bertolli |
Feb 17 2021, 04:25 AM
Post
#1
|
Group: Members Posts: 3 Joined: 17-February 21 Member No.: 27,801 |
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 |
pandy |
Feb 17 2021, 05:27 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Forget what I wrote. It won't work. I misread.
|
Christian J |
Feb 17 2021, 08:08 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Are there more than one collapsible sections on the page?
|
pandy |
Feb 17 2021, 08:18 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
And how does the toggle() function look?
|
Bertolli |
Feb 17 2021, 09:03 AM
Post
#5
|
Group: Members Posts: 3 Joined: 17-February 21 Member No.: 27,801 |
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? |
Christian J |
Feb 17 2021, 12:29 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
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 CODE /* remove list styling */ #info, #info li { margin: 0; padding: 0; list-style: none; cursor: pointer; } /* toggle icons */ #info h3.closed_icon:after {content: '\25bc';} #info h3.open_icon:after {content: '\25b2';} /* toggle content */ #info div.closed {display: none;} #info div.open {display: block;} HTML CODE <ul id="info"> <li> <h3>DISCOVER MORE</h3> <div class="item"> <p>Suitable for Vegetarians: Yes</p> <p>Milk Type: Cow</p> <p>Unpasteurised? No</p> </div> </li> <li> <h3>ALLERGENS</h3> <div class="item"> <p>Contains Milk.</p> </div> </li> </ul> JS CODE <script> function toggle_info() { var info=document.getElementById('info'); var li=info.getElementsByTagName('li'); // make all div.item close when page is first loaded. for(var i=0; i<li.length; i++) { var cur_item=li[i].getElementsByClassName('item')[0]; cur_item.className+=' closed'; li[i].getElementsByTagName('h3')[0].className='closed_icon'; } // toggle individual div.item elements for(var i=0; i<li.length; i++) { li[i].onclick=function() { var cur_item=this.getElementsByClassName('item')[0]; var h3=this.getElementsByTagName('h3')[0]; if(cur_item.className.indexOf('closed')!=-1) { cur_item.className='item open'; h3.className='open_icon'; } else { cur_item.className='item closed'; h3.className='closed_icon'; } return false; } } } window.addEventListener('DOMContentLoaded', toggle_info(), false); </script> |
pandy |
Feb 17 2021, 01:37 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Is it a method? I thought it was function written in a way I'm not familiar with.
|
Christian J |
Feb 17 2021, 03:07 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
Is it a method? I thought it was function written in a way I'm not familiar with. See here: https://developer.mozilla.org/en-US/docs/We...okenList/toggle I thought it was a user-defined function too. I've even given some of my own functions that name, now maybe they'll break. |
pandy |
Feb 17 2021, 03:12 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Thank you. I feel less stupid now. Shared stupidity is half stupidity.
|
Bertolli |
Feb 18 2021, 03:56 AM
Post
#10
|
Group: Members Posts: 3 Joined: 17-February 21 Member No.: 27,801 |
Thanks! I need to do some formatting, but that's perfect : ) thank you for your help.
|
Lo-Fi Version | Time is now: 27th April 2024 - 10:00 PM |