Toggle FA icon?

DipperDolphin · April 2, 2019, 4:57pm

Hi all,

Having trouble toggling this icon on my site:

GiacomoLaw/giacomolaw.github.io/blob/c4259b9cd2480f16441593bcf9acd23cf6b81660/index.html#L172


						</li>
						<li class="list-inline-item mt-3 md-lg-0">
							<p><i class="fas fa-eye-slash"></i> Source private</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="row">
				<div class="col-12 col-md-6 offset-md-3">
					<button class="btn d-block custom-btn btn-viewprojects" onclick="toggler('expandportfolio');">
						<i class="fas fa-chevron-down" id="porttoggle"></i>&nbsp;&nbsp;&nbsp;View All Projects
					</button>
				</div>
			</div>
			<!-- ############ portfolio expansion ############ -->
			<div id="expandportfolio">
				<!-- myspace site -->
				<div class="row my-5 py-5">
					<div class="col-12 col-lg-7 order-lg-2">
						<picture>
							<source srcset="img/myspaceprofile.webp" type="image/webp" class="img-fluid">

I’d like it toggled when the expandportfolio section is expanded. I tried using .toggleClass() but to no avail.

Anyone got any ideas?

Thanks

shimphillip · April 2, 2019, 5:16pm

Do you have a demo you can share?

DipperDolphin · April 2, 2019, 5:40pm

Not really a demo, but the website is live here: https://giacomolaw.me

And the repo is here: https://github.com/GiacomoLaw/giacomolaw.github.io/tree/master

What I am trying to do is flip the fa-chevron-down class to fa-chevron-up when the container is expanded, with jQuery or JavaScript.

Thanks