title: Javascript show/hide button: changing button icon from FontAwesome to image
body: <p>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: <a href="http://puredentalcentre.co.uk/about.html" rel="nofollow noreferrer">http://puredentalcentre.co.uk/about.html</a></p>
  <p>(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!)</p>
  <p>This is the current Javascript:</p>
  <pre><code>const elements = document.querySelectorAll(&quot;.profile&quot;);
  elements.forEach((e =&gt; {
  let l = e.querySelector(&quot;.profile button&quot;),
      t = e.querySelector(&quot;.profile button i&quot;);
  var r = e.lastElementChild,
      c = document.querySelectorAll(&quot;.profile .profile-desc&quot;);
  l.addEventListener(&quot;click&quot;, (() =&gt; {
      c.forEach((e =&gt; {
          let l = e.parentElement.querySelector(&quot;button i&quot;);
          r !== e &amp;&amp; (e.classList.add(&quot;hideText&quot;), l.className = &quot;far fa-plus-circle&quot;)
      })), r.classList.toggle(&quot;hideText&quot;), &quot;far fa-plus-circle&quot; === t.className ? t.className = &quot;far fa-minus-circle&quot; : t.className = &quot;far fa-plus-circle&quot;
  }))
  }));
  </code></pre>
  <p>This is how the current HTML calls the button:</p>
  <pre><code>  &lt;!-- Glenn Teuchmann --&gt;
    &lt;div class=&quot;profile&quot; id=&quot;glenn&quot;&gt;
  
      &lt;div class=&quot;profile-img-section&quot;&gt;
        &lt;div class=&quot;profile-img&quot;&gt;
          &lt;picture&gt;
            &lt;source type=&quot;image/webp&quot;
              srcset=&quot;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&quot;
              sizes=&quot;(min-width: 1441px) 411px,
                    (min-width: 1025px) 30vw,
                    (min-width: 769px) 45vw,
                    85vw&quot;&gt;
            
            &lt;img 
              srcset=&quot;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&quot;
              sizes=&quot;(min-width: 1441px) 411px,
                    (min-width: 1025px) 30vw,
                    (min-width: 769px) 45vw,
                    85vw&quot;
              src=&quot;img/pdc_profile_gt_320.png&quot;
              alt=&quot;Glenn Teuchmann&quot;&gt;
          &lt;/picture&gt;
        &lt;/div&gt;&lt;!-- profile img --&gt;
  
        &lt;div class=&quot;profile-header&quot;&gt;
          
          &lt;div class=&quot;profile-title&quot;&gt;
            &lt;h4&gt;Glenn Teuchmann&lt;/h4&gt;
            &lt;p class=&quot;reg-no&quot;&gt;GDC Reg &amp;numero; 265402&lt;/p&gt;
          &lt;/div&gt;&lt;!-- profile title --&gt;
  
          &lt;button&gt;&lt;i class=&quot;far fa-plus-circle&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        
        &lt;/div&gt;&lt;!-- profile header --&gt;
  
      &lt;/div&gt;&lt;!-- profile img section --&gt;
      
      &lt;div class=&quot;profile-desc hideText&quot;&gt;
        &lt;p&gt;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.&lt;/p&gt;
     
      &lt;/div&gt;&lt;!-- profile desc --&gt;
  </code></pre>
  <p>This is my attempt, but it results in just the <code>plus-circle_250px.png</code> showing without being clickable so the text is not revealed as in the original code:</p>
  <pre><code>var path = &quot;img/&quot;
  var pathEls=document.querySelectorAll(&quot;.profile&quot;);
  elements.forEach((e=&gt;{
  let l=e.querySelector(&quot;.profile button&quot;),
  t=e.querySelector(&quot;.profile button img&quot;);
  var r=e.lastElementChild,
  c=document.querySelectorAll(&quot;.profile .profile-desc&quot;);
  l.addEventListener(&quot;click&quot;,(()=&gt;{
  c.forEach((e=&gt;{
  let l=e.parentElement.querySelector(&quot;button img&quot;);
  r!==e&amp;&amp;(e.classList.add(&quot;hideText&quot;),l.className=&quot;plus-circle_250px.png&quot;)})),r.classList.toggle(&quot;hideText&quot;),&quot;plus-circle_250px.png&quot;===t.className?t.className=&quot;minus-circle_250px.png&quot;:t.className=&quot;plus-circle_250px.png&quot;}))}));
  
  </code></pre>
  <p>HTML</p>
  <pre><code>      &lt;!-- Glenn Teuchmann --&gt;
        &lt;div class=&quot;profile&quot; id=&quot;glenn&quot;&gt;
  
          &lt;div class=&quot;profile-img-section&quot;&gt;
            &lt;div class=&quot;profile-img&quot;&gt;
              &lt;picture&gt;
                &lt;source type=&quot;image/webp&quot;
                  srcset=&quot;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&quot;
                  sizes=&quot;(min-width: 1441px) 411px,
                        (min-width: 1025px) 30vw,
                        (min-width: 769px) 45vw,
                        85vw&quot;&gt;
                
                &lt;img 
                  srcset=&quot;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&quot;
                  sizes=&quot;(min-width: 1441px) 411px,
                        (min-width: 1025px) 30vw,
                        (min-width: 769px) 45vw,
                        85vw&quot;
                  src=&quot;img/pdc_profile_gt_320.png&quot;
                  alt=&quot;Glenn Teuchmann&quot;&gt;
              &lt;/picture&gt;
            &lt;/div&gt;&lt;!-- profile img --&gt;
  
            &lt;div class=&quot;profile-header&quot;&gt;
              
              &lt;div class=&quot;profile-title&quot;&gt;
                &lt;h4&gt;Glenn Teuchmann&lt;/h4&gt;
                &lt;p class=&quot;reg-no&quot;&gt;GDC Reg &amp;numero; 265402&lt;/p&gt;
              &lt;/div&gt;&lt;!-- profile title --&gt;
  
              &lt;button&gt;&lt;img src=&quot;img/plus-circle_250px.png&quot; height=&quot;25px&quot;&gt;&lt;/button&gt;
            
            &lt;/div&gt;&lt;!-- profile header --&gt;
  
          &lt;/div&gt;&lt;!-- profile img section --&gt;
          
          &lt;div class=&quot;profile-desc hideText&quot;&gt;
            &lt;p&gt;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.&lt;/p&gt;
          &lt;/div&gt;&lt;!-- profile desc --&gt;
  
        &lt;/div&gt;&lt;!-- profile --&gt;
  </code></pre>
  <p>How do I swap out the <code>far fa-plus-circle</code> and <code>far fa-minus-circle</code> for my two replacement images <code>plus-circle_250px.png</code> and <code>minus-circle_250px.png</code>?</p>