How do I use a div to show another specific div/text content when the div is clicked? Essentially turning a div into a button - Html

Luka
March 20, 2023
103 views
0 votes
2 Answers

I’m not a super experienced coder by any means, but I’ve been playing around a lot with neocities. I have a page going that I like how it looks so far, but I can’t get it to actually function. I’m basically trying to get the category divs on the left to show the corresponding text to the right. Here’s a visual if that helps.

I’ve been googling a lot, looking through SO answers, tutorials, etc and trying to apply what I’ve found but I think I’m just not sure how to plug what where. (also I don’t want to visually turn the "buttons" on the left into the "buttons" that seem to be the default when using the "button" element).

.bio {
  margin: auto;
  height: 100%;
  width: 100%;
  font-family: 'Franklin Gothic';
  display: flex;
}

.bio-cat-holder {
  width: 20%;
  height: auto;
  padding: 20px;
}

.bio-cat {
  background: #9c2f2f;
  color: #bbbbbb;
  border: 2px solid #bbbbbb;
  height: 30px;
  width: 100%;
  font-family: 'VT323';
  font-size: 30px;
  padding-top: 4px;
  text-align: center;
  padding-bottom: 4px;
  margin-top: 10px;
  margin-left: 2%;
  margin-bottom: 1%;
  margin-right: 20px;
  float: left;
}

.bio-text-box {
  height: auto;
  border: 2px solid #bbbbbb;
  float: right;
  margin: 10px;
  flex: 1;
  padding: 15px;
}

<div class="bio">
  <div class="bio-cat-holder">
    <div class="bio-cat">GENERAL INFORMATION</div>
    <div class="bio-cat">SKILLS & ABILITIES</div>
    <div class="bio-cat">CATEGORY 3</div>
    <div class="bio-cat">CATEGORY 4</div>
    <div class="bio-cat">CATEGORY 5</div>
    <div class="bio-cat">CATEGORY 6</div>
    <div class="bio-cat">CATEGORY 7</div>
  </div>
  <div class="bio-text-box">
    <div class="general">Blah Blah Blah Biography</div>
    <div id="skills">Blah blah blah skills</div>
  </div>
</div>

Answers

I followed what you’re doing and here’s the code I ended up with. And I think this is somehow doing what you want, based on my understanding. So here’s what I did in summary:

I added IDs to each button(divs)
Added .bio-text class to each category text
Added a JS function that adds a click event listener to each "bio-cat" element. By default, the category text’s display is set to none. When clicked, it will hide the current and shows the category text from the chosen button(div).
Added CSS hover effect and change the cursor to pointer when it is clickable

const catDivs = document.querySelectorAll('.bio-cat');
const textDivs = document.querySelectorAll('.bio-text');

for (let i = 0; i < catDivs.length; i++) {
  catDivs[i].addEventListener('click', function() {
    const visibleText = document.querySelector('.bio-text[style="display: block;"]');
    if (visibleText) {
      visibleText.style.display = 'none';
    }
    textDivs[i].style.display = 'block';
  });
}

.bio-text {
  display: none;
}

.bio-cat {
  background: #9c2f2f;
  color: #bbbbbb;
  border: 2px solid #bbbbbb;
  height: 30px;
  width: 100%;
  font-family: 'VT323';
  font-size: 30px;
  padding-top: 4px;
  text-align: center;
  padding-bottom: 4px;
  margin-top: 10px;
  margin-left: 2%;
  margin-bottom: 1%;
  margin-right: 20px;
  float: left;
  cursor: pointer;
}

.bio-cat:hover {
  background: #bbbbbb;
  color: #9c2f2f;
}

.bio-text-box {
  height: auto;
  border: 2px solid #bbbbbb;
  float: right;
  margin: 10px;
  flex: 1;
  padding: 15px;
}

<div class="bio-cat-holder">
  <div class="bio-cat" id="general-info-btn">GENERAL INFORMATION</div>
  <div class="bio-cat" id="skills-btn">SKILLS & ABILITIES</div>
  <div class="bio-cat" id="cat3-btn">CATEGORY 3</div>
  <div class="bio-cat" id="cat4-btn">CATEGORY 4</div>
  <div class="bio-cat" id="cat5-btn">CATEGORY 5</div>
  <div class="bio-cat" id="cat6-btn">CATEGORY 6</div>
  <div class="bio-cat" id="cat7-btn">CATEGORY 7</div>
</div>

<div class="bio-text-box">
  <div class="bio-text" id="general-info">
    Blah Blah Blah Biography
  </div>
  <div class="bio-text" id="skills">
    Blah blah blah skills
  </div>
  <div class="bio-text" id="cat3">
    Category 3 text
  </div>
  <div class="bio-text" id="cat4">
    Category 4 text
  </div>
  <div class="bio-text" id="cat5">
    Category 5 text
  </div>
  <div class="bio-text" id="cat6">
    Category 6 text
  </div>
  <div class="bio-text" id="cat7">
    Category 7 text
  </div>
</div>

For this you need javascript adding click event listner.

<button id="myButton">Click me</button>
<div id="myDiv">Original content</div>

<script>
    const button = document.getElementById("myButton");
    const div = document.getElementById("myDiv");
    
    button.addEventListener("click", () => {
      div.textContent = "New content";
    });
</script>

For your case it can be done like this,

<div id="cat1" class="bio-cat">GENERAL INFORMATION</div>
<div id="cat2" class="bio-cat">SKILLS & ABILITIES</div>
<div id="cat3" class="bio-cat">CATEGORY 3</div>
<div id="general" class="general">
    Blah Blah Blah Biography
</div>

<script>
    const div1 = document.getElementById("cat1");
    const div2 = document.getElementById("cat2");
    const div3 = document.getElementById("cat3");
    const div = document.getElementById("general");
    
    div1.addEventListener("click", () => {
      div.textContent = "Div 1 was clicked";
    });
    
    div2.addEventListener("click", () => {
      div.textContent = "Div 2 was clicked";
    });
    
    div3.addEventListener("click", () => {
      div.textContent = "Div 3 was clicked";
    });
</script>

Check how I used ID’s with javascript. If you need to reduce the code you can use jquery library or foreach loop.

Please signup or login to give your own answer.

Click here to cancel reply.

How do I use a div to show another specific div/text content when the div is clicked? Essentially turning a div into a button – Html

Answers