I need to change Font Awesome icons to static images. The icons are used as buttons to show/hide text. I tried to add a working snippet but it wouldn't function correctly - maybe because this is calling FontAwesome - so here is the functioning website instead and code below: http://puredentalcentre.co.uk/about.html
(I've never used Javascript before and did not build this site - I just need to make this change. Using my basic HTML/CSS knowledge, I have attempted changes but they have resulted in the show/hide button no longer working!)
This is the current Javascript:
const elements = document.querySelectorAll(".profile");
elements.forEach((e => {
let l = e.querySelector(".profile button"),
t = e.querySelector(".profile button i");
var r = e.lastElementChild,
c = document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click", (() => {
c.forEach((e => {
let l = e.parentElement.querySelector("button i");
r !== e && (e.classList.add("hideText"), l.className = "far fa-plus-circle")
})), r.classList.toggle("hideText"), "far fa-plus-circle" === t.className ? t.className = "far fa-minus-circle" : t.className = "far fa-plus-circle"
}))
}));
This is how the current HTML calls the button:
<!-- Glenn Teuchmann -->
<div id="glenn">
<div >
<div >
<picture>
<source type="image/webp"
srcset="img/pdc_profile_gt_1600.webp 1600w,
img/pdc_profile_gt_1000.webp 1000w,
img/pdc_profile_gt_800.webp 800w,
img/pdc_profile_gt_640.webp 640w,
img/pdc_profile_gt_500.webp 500w,
img/pdc_profile_gt_320.webp 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img
srcset="img/pdc_profile_gt_1600.jpg 1600w,
img/pdc_profile_gt_1000.jpg 1000w,
img/pdc_profile_gt_800.jpg 800w,
img/pdc_profile_gt_640.jpg 640w,
img/pdc_profile_gt_500.jpg 500w,
img/pdc_profile_gt_320.jpg 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw"
src="img/pdc_profile_gt_320.png"
alt="Glenn Teuchmann">
</picture>
</div><!-- profile img -->
<div >
<div >
<h4>Glenn Teuchmann</h4>
<p >GDC Reg № 265402</p>
</div><!-- profile title -->
<button><i ></i></button>
</div><!-- profile header -->
</div><!-- profile img section -->
<div >
<p>Glenn qualified from Peninsula College of Medicine and Dentistry in 2016. Since graduating, he has gained a wide range of experience in all areas of general dentistry, while attaining a Postgraduate diploma in restorative dentistry.</p>
</div><!-- profile desc -->
This is my attempt, but it results in just the plus-circle_250px.png showing without being clickable so the text is not revealed as in the original code:
var path = "img/"
var pathEls=document.querySelectorAll(".profile");
elements.forEach((e=>{
let l=e.querySelector(".profile button"),
t=e.querySelector(".profile button img");
var r=e.lastElementChild,
c=document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click",(()=>{
c.forEach((e=>{
let l=e.parentElement.querySelector("button img");
r!==e&&(e.classList.add("hideText"),l.className="plus-circle_250px.png")})),r.classList.toggle("hideText"),"plus-circle_250px.png"===t.className?t.className="minus-circle_250px.png":t.className="plus-circle_250px.png"}))}));
HTML
<!-- Glenn Teuchmann -->
<div id="glenn">
<div >
<div >
<picture>
<source type="image/webp"
srcset="img/pdc_profile_gt_1600.webp 1600w,
img/pdc_profile_gt_1000.webp 1000w,
img/pdc_profile_gt_800.webp 800w,
img/pdc_profile_gt_640.webp 640w,
img/pdc_profile_gt_500.webp 500w,
img/pdc_profile_gt_320.webp 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img
srcset="img/pdc_profile_gt_1600.jpg 1600w,
img/pdc_profile_gt_1000.jpg 1000w,
img/pdc_profile_gt_800.jpg 800w,
img/pdc_profile_gt_640.jpg 640w,
img/pdc_profile_gt_500.jpg 500w,
img/pdc_profile_gt_320.jpg 320w"
sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw"
src="img/pdc_profile_gt_320.png"
alt="Glenn Teuchmann">
</picture>
</div><!-- profile img -->
<div >
<div >
<h4>Glenn Teuchmann</h4>
<p >GDC Reg № 265402</p>
</div><!-- profile title -->
<button><img src="img/plus-circle_250px.png" height="25px"></button>
</div><!-- profile header -->
</div><!-- profile img section -->
<div >
<p>Glenn qualified from Peninsula College of Medicine and Dentistry in 2016. Since graduating, he has gained a wide range of experience in all areas of general dentistry, while attaining a Postgraduate diploma in restorative dentistry.</p>
</div><!-- profile desc -->
</div><!-- profile -->
How do I swap out the far fa-plus-circle and far fa-minus-circle for my two replacement images plus-circle_250px.png and minus-circle_250px.png?
CodePudding user response：
A little help :-)
var path = "https://i.stack.imgur.com/";
var profileEls = document.querySelectorAll(".profile");
for (let profileEl of profileEls) {
profileEl.addEventListener("click", function () {
var imgEl = this.querySelector("button img");
if (imgEl.src.split("/").pop() === "f3oC3.png") {
imgEl.src = path "BUncn.png";
} else {
imgEl.src = path "f3oC3.png";
}
});
}<div >
<button><img height="30"
src="https://i.stack.imgur.com/f3oC3.png"
></button>
</div>
<div >
<button><img height="30"
src="https://i.stack.imgur.com/f3oC3.png"
></button>
</div>
<div >
<button><img height="30"
src="https://i.stack.imgur.com/f3oC3.png"
></button>
</div>
CodePudding user response：
Try with the following snippet:
const elements = document.querySelectorAll(".profile");
elements.forEach((e=>{
let l = e.querySelector(".profile button")
, t = e.querySelector(".profile button img");
var r = e.lastElementChild
, c = document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click", (()=>{
c.forEach((e=>{
let l = e.parentElement.querySelector("button img");
r !== e && (e.classList.add("hideText"),
l.src = "img/plus-circle_250px.png")
}
)),
r.classList.toggle("hideText"),
"img/plus-circle_250px.png" === t.getAttribute('src') ? t.src = "img/minus-circle_250px.png" : t.src = "img/plus-circle_250px.png"
}
))
}
));
const elements = document.querySelectorAll(".profile");
elements.forEach((e=>{
let l = e.querySelector(".profile button")
, t = e.querySelector(".profile button img");
var r = e.lastElementChild
, c = document.querySelectorAll(".profile .profile-desc");
l.addEventListener("click", (()=>{
c.forEach((e=>{
let l = e.parentElement.querySelector("button img");
r !== e && (e.classList.add("hideText"),
l.src = "img/plus-circle_250px.png")
}
)),
r.classList.toggle("hideText"),
"img/plus-circle_250px.png" === t.getAttribute('src') ? t.src = "img/minus-circle_250px.png" : t.src = "img/plus-circle_250px.png"
}
))
}
));.profile-grid {
grid-column: span 12;
display: grid;
grid-template-columns: 1fr;
column-gap: .75rem;
row-gap: 1.5rem;
align-items: stretch
}
@media screen and (min-width: 23.5em) {
.profile-grid {
grid-template-columns:repeat(12, 1fr);
column-gap: 1rem;
row-gap: 2rem
}
}
@media screen and (min-width: 48em) {
.profile-grid {
grid-template-columns:repeat(4, 1fr);
column-gap: 1.5rem;
row-gap: 3rem
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid {
grid-template-columns:repeat(6, 1fr);
column-gap: 2rem;
row-gap: 4rem
}
}
.profile-grid .profile {
grid-column: span 1;
overflow: hidden;
background-color: #fff;
z-index: 0
}
@media screen and (min-width: 23.5em) {
.profile-grid .profile {
grid-column:2/12
}
}
@media screen and (min-width: 48em) {
.profile-grid .profile {
grid-column:span 2
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile {
grid-column:span 2
}
}
@media screen and (min-width: 48em) {
.profile-grid .profile:last-child:nth-child(2n-1) {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:last-child:nth-child(2n-1) {
grid-column:span 2
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:last-child:nth-child(3n-2) {
grid-column:3/5
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:nth-last-child(2):nth-child(3n-2) {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile:last-child:nth-child(3n-1) {
grid-column:4/6
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#glenn {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#deepa {
grid-column:4/6
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#jonny {
grid-column:2/4
}
}
@media screen and (min-width: 64.0625em) {
.profile-grid .profile#simon {
grid-column:4/6
}
}
.profile-grid .profile .profile-img-section {
width: 100%;
position: relative;
padding-bottom: 100%;
overflow: hidden;
z-index: 1
}
.profile-grid .profile .profile-img-section .profile-img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 0
}
.profile-grid .profile .profile-img-section .profile-img picture {
width: 100%;
height: 100%
}
.profile-grid .profile .profile-img-section .profile-img picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0%
}
.profile-grid .profile .profile-img-section .profile-header {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(255,255,255,.9)
}
.profile-grid .profile .profile-img-section .profile-header .profile-title h4 {
color: #222
}
.profile-grid .profile .profile-img-section .profile-header .profile-title p {
font-weight: 500
}
.profile-grid .profile .profile-img-section .profile-header button {
border: none;
outline: none;
background: none;
cursor: pointer;
font-size: 1.5rem
}
.profile-grid .profile .profile-desc {
background-color: rgba(255,255,255,.9);
transform: translateY(0);
transition: transform .3s ease;
z-index: -1;
overflow: hidden
}
.profile-grid .profile .profile-desc.hideText {
transform: translateY(-100%);
height: 0
}<div >
<!-- Glenn Teuchmann -->
<div id="glenn">
<div >
<div >
<picture>
<source type="image/webp" srcset="img/pdc_profile_gt_1600.webp 1600w,
img/pdc_profile_gt_1000.webp 1000w,
img/pdc_profile_gt_800.webp 800w,
img/pdc_profile_gt_640.webp 640w,
img/pdc_profile_gt_500.webp 500w,
img/pdc_profile_gt_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_gt_1600.jpg 1600w,
img/pdc_profile_gt_1000.jpg 1000w,
img/pdc_profile_gt_800.jpg 800w,
img/pdc_profile_gt_640.jpg 640w,
img/pdc_profile_gt_500.jpg 500w,
img/pdc_profile_gt_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_gt_320.png" alt="Glenn Teuchmann">
</picture>
</div>
<!-- profile img -->
<div >
<div >
<h4>Glenn Teuchmann</h4>
<p >GDC Reg № 265402</p>
</div>
<!-- profile title -->
<button><img src="img/plus-circle_250px.png"></button>
</div>
<!-- profile header -->
</div>
<!-- profile img section -->
<div >
<p>Glenn qualified from Peninsula College of Medicine and Dentistry in 2016. Since graduating, he has gained a wide range of experience in all areas of general dentistry, while attaining a Postgraduate diploma in restorative dentistry.</p>
<p>Glenn provides all general dental treatments including tooth whitening and enjoys working with adhesive tooth-coloured fillings to create natural, healthy, confident smiles. Having a background in health care Glenn takes a holistic approach to dentistry and enjoys building long lasting relationships with his patients.</p>
<p>Having grown up in North Devon, Glenn enjoys most things that involve being active and outdoors including surfing, walking, rugby (Chiefs fan) and skiing.</p>
</div>
<!-- profile desc -->
</div>
<!-- profile -->
<!-- Deepa Shah -->
<div id="deepa">
<div >
<div >
<picture>
<source type="image/webp" srcset="img/pdc_profile_ds_1600.webp 1600w,
img/pdc_profile_ds_1000.webp 1000w,
img/pdc_profile_ds_800.webp 800w,
img/pdc_profile_ds_640.webp 640w,
img/pdc_profile_ds_500.webp 500w,
img/pdc_profile_ds_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_ds_1600.jpg 1600w,
img/pdc_profile_ds_1000.jpg 1000w,
img/pdc_profile_ds_800.jpg 800w,
img/pdc_profile_ds_640.jpg 640w,
img/pdc_profile_ds_500.jpg 500w,
img/pdc_profile_ds_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_ds_320.png" alt="Deepa Shah">
</picture>
</div>
<div >
<div >
<h4>Deepa Shah</h4>
<p >GDC Reg № 85976</p>
</div>
<button><img src="img/plus-circle_250px.png"></button>
</div>
</div>
<div >
<p>Deepa qualified in 2005 from Guy’s, King’s and St Thomas’ Dental Institute in London, and has 15 years of experience working within general practice and specialist prosthodontic practice. She has completed various postgraduate courses and training to stay at the forefront of clinical dentistry. Deepa has acquired a Masters’ in Conservative Dentistry from the Eastman Dental Institute, London. She is a Member of The Faculty of Dental Surgery of the Royal College of Surgeons of England and is a visiting lecturer at the Eastman Dental Institute for postgraduate students.</p>
<p>Deepa’s clinical interests lie within the fields of minimally invasive/adhesive dentistry, prosthodontics (crowns/bridges/dentures), implant dentistry and cosmetic dentistry. She particularly enjoys providing treatment solutions for complex cases including extensive tooth wear and broken down dentitions. Her philosophy: “preventive, aesthetic and functional dentistry, respecting what nature has provided”.</p>
<p>Deepa moved to North Devon in 2018 following her love of the surf and seeking a relaxed outdoor lifestyle by the sea. Away from work you’ll find her in the waves, or out exploring this beautiful part of the world.</p>
</div>
</div>
<!-- Jonny Lynd -->
<div id="jonny">
<div >
<div >
<picture>
<source type="image/webp" srcset="img/pdc_profile_jl_1600.webp 1600w,
img/pdc_profile_jl_1000.webp 1000w,
img/pdc_profile_jl_800.webp 800w,
img/pdc_profile_jl_640.webp 640w,
img/pdc_profile_jl_500.webp 500w,
img/pdc_profile_jl_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_jl_1600.jpg 1600w,
img/pdc_profile_jl_1000.jpg 1000w,
img/pdc_profile_jl_800.jpg 800w,
img/pdc_profile_jl_640.jpg 640w,
img/pdc_profile_jl_500.jpg 500w,
img/pdc_profile_jl_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_jl_320.png" alt="Jonny Lynd">
</picture>
</div>
<div >
<div >
<h4>Jonny Lynd</h4>
<p >GDC Reg № 85992</p>
</div>
<button><img src="img/plus-circle_250px.png"></button>
</div>
</div>
<div >
<p>Jonny graduated from Birmingham university in 2005 with the prize in conservative dentistry. During the next 10 years he became increasingly interested in Implant Dentistry. His involvement in this field continued to grow after discovering the huge positive impact implant treatment can make to patient lives. In 2018 he completed an MSc in Dental Implantology with distinction at Edgehill University.</p>
<p>Jonny is married with 3 young sons, in his spare time Jonny enjoys kitesurfing, surfing, Skiing and cycling.</p>
</div>
</div>
<!-- Simon Flynn -->
<div id="simon">
<div >
<div >
<picture>
<source type="image/webp" srcset="img/pdc_profile_sf_1600.webp 1600w,
img/pdc_profile_sf_1000.webp 1000w,
img/pdc_profile_sf_800.webp 800w,
img/pdc_profile_sf_640.webp 640w,
img/pdc_profile_sf_500.webp 500w,
img/pdc_profile_sf_320.webp 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw">
<img srcset="img/pdc_profile_sf_1600.jpg 1600w,
img/pdc_profile_sf_1000.jpg 1000w,
img/pdc_profile_sf_800.jpg 800w,
img/pdc_profile_sf_640.jpg 640w,
img/pdc_profile_sf_500.jpg 500w,
img/pdc_profile_sf_320.jpg 320w" sizes="(min-width: 1441px) 411px,
(min-width: 1025px) 30vw,
(min-width: 769px) 45vw,
85vw" src="img/pdc_profile_sf_320.png" alt="Simon Flynn">
</picture>
</div>
<div >
<div >
<h4>Simon Flynn</h4>
<p >GDC Reg № 61987</p>
</div>
<button><img src="img/plus-circle_250px.png"></button>
</div>
</div>
<div >
<p>Simon qualified from Guys (University of London) in 1986 and has 31 years of experience in general dental practice.,including running a very successful multi surgery practice in North Devon. His professional interests are whole patient care with a particular interest in cosmetic dentistry with special reference to crown and bridgework. Married with two grown up children, away from work his interests include water skiing, snow skiing and enjoying the outdoor life which North Devon offers.</p>
</div>
</div>
</div>