The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> JavaScript to change Chevron icon direction only changing it when clicking the chevron icon
Bertolli
post 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 biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2021, 05:27 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,734
Joined: 9-August 06
Member No.: 6



Forget what I wrote. It won't work. I misread.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 17 2021, 08:08 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,802
Joined: 10-August 06
Member No.: 7



Are there more than one collapsible sections on the page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2021, 08:18 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,734
Joined: 9-August 06
Member No.: 6



And how does the toggle() function look?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Bertolli
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 17 2021, 12:29 PM
Post #6


.
********

Group: WDG Moderators
Posts: 8,802
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2021, 01:37 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,734
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. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 17 2021, 03:07 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,802
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 17 2021, 07:37 PM) *

Is it a method? I thought it was function written in a way I'm not familiar with. cool.gif

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. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2021, 03:12 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 19,734
Joined: 9-August 06
Member No.: 6



Thank you. I feel less stupid now. Shared stupidity is half stupidity. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Bertolli
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th June 2021 - 11:25 AM