javascripthtmlcss

How can I make a changing information square in HTML?

I want to create a div on my site that looks a little like the image attached below. It’s essentially a square on the webpage with a list of items on the left, and as the user clicks on these items the information displayed on the right matches the selection. The background color of the selected item and the shown on the right should match.

Any tips? What is this called and how can I further research it? What HTML attributes or CSS styles can I use to make this work? Or do I have to use Javascript? Thank you very much 🙏

I tried troubleshooting the web but I couldn’t describe my issue in words; the best I could do was a drawing. Anything and everything is appreciated (especially code!)

Image of the feature I'm trying to do(https://i.sstatic.net/pEUrW.jpg) enter image description here

Solution

  • Using HTML, CSS, and JQuery

    try this one : enter link here

    $(document).on("click", ".tabseletd", function(e) {
  $("ul").find(".active").removeClass("active");
  $(this).addClass("active");
  $("#tabcontent").find("h1").text($(this).html());
});
    li {
  list-style: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
}

ul {
  padding: 0;
}

.maindiv {
  display: flex;
  border: 1px solid #8080802b;
  padding: 15px;
}

.left-div {
  width: 20%;
}

.right-div {
  width: 80%;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  background-color: #8080804f;
}

.active {
  background-color: #8080804f;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maindiv">
  <div class="left-div">
    <ul>
      <li class="tabseletd active">Tab 1</li>
      <li class="tabseletd">Tab 2</li>
      <li class="tabseletd">Tab 3</li>
    </ul>
  </div>
  <div class="right-div">
    <div id="tabcontent">
      <div class="content">
        <h1>Tab 1 </h1>
      </div>
    </div>
  </div>
</div>