JSFiddle - React, Tailwind, and code Playground

by MarioL

HTML

<div id="accordion-container">
  <div id="accordion__img">
    <img id="abc-img" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Photography">
    <img id="def-img" src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" alt="Creativity">
    <img id="ghi-img" src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Web Design">
  </div>

  <div id="services__accordion">
    <div class="accordion" tab-name="abc">
      <h3>ABC</h3>
      <div class="accordion__body">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      
      <!-- /.accordion__body -->
    </div>
    <div class="accordion" tab-name="def">
      <h3>DEF</h3>
      <div class="accordion__body">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <!-- /.accordion__body -->
    </div>
    <div class="accordion" tab-name="ghi">
      <h3>GHI</h3>
      <div class="accordion__body">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <!-- /.accordion__body -->
    </div>
  </div>
  <!-- /#services__acordion -->
</div>

CSS

*{
  font-family:arial;
  }

 #services__accordion h3 {
  background-color: #F4F4F7;
  color: #033;
  padding: 10px;
}

#services__accordion h3:after {
  content: '\002B';
  color: #ccc9d4;
  font-weight: bold;
  float: right;
  margin-right: 10px;
}
#services__accordion{
  margin:auto;
  width:80%;
}
#accordion-container {
  display: grid;
  grid-template-columns: 40% auto;
}
#accordion__img img {
  display: block;
  width:95%;
  margin:auto;
}
#services__accordion h3:hover {
  background-color: #2aa0c8;
  color: #F4F4F7;
}

#services__accordion h3.active {
  background-color: #2aa0c8;
  color: #F4F4F7;
}

#services__accordion h3.active:after {
    content: "\2212";
}
.accordion__body{
  padding:0px 10px;
  width:300px;
  border: 0px solid transparent;
}

JavaScript

let panels = $("#services__accordion > .accordion > .accordion__body").hide()

// Hide all accordion images
images = $("#accordion__img > img").hide();

// On click of a panel title

$("#services__accordion .accordion  h3").click(function (e) {
		e.stopPropagation();
    // The panel is not the H3, but its parent.
    let panel = $(this).parent(),
            tabName = panel.attr("tab-name"),
            image = $("#" + tabName + "-img");

    // Slide Up all other panels
    panels.slideUp();
    images.hide();

    // Slide Down target panel, and target image.
    panel.find(".accordion__body").slideDown();
    image.fadeIn('slow');

    $(".accordion  h3.active").removeClass('active');
    $(this).addClass('active');

    return false;
}).eq(0).trigger('click');