Question 55698 in Html Question posted in
Some basic documentation can be found here.

how do i get a div to change content with css? – Html

i made a new page on my website, and i want the text content of a div to change depending on what button is pressed. i have no clue how to do this lol.

my first idea was to make the image a link that goes to the id.

<!-- items -->
<div id="items_wrapper">
    <div id="navigator_container">
        
        <!-- nav buttons -->
        <div id="navbutton_comics">
            <a href="#comics">
            <img src="images/comics_label.png"
                 alt="comics button"
                 width="120px">
            </a>
        </div>

        <!-- section 1: comics -->
        <div id="comics">
            help
        </div>
    </div>
</div>

then i applied the style properties of the container div to the comics subsection.

/* items */
#items_wrapper{
    display: inline-block;
    text-align: center;
    margin-top: 50px;
    position: absolute;
    
    left:300px;
    width:700px;
    height:700px;
    
    background-color: aliceblue; 
}

/* navigator */
#navigator_container{
    display: inline-block;
    text-align: center;
    margin-top:20px;
    position: inherit;
    
    left:720px;
    width:300px;
    height:700px;
}
    
    /* section 1: comics */
    #comics{
    display: inline-block;
    text-align: center;
    margin-top:20px;
    position: inherit;
    
    left:720px;
    width:300px;
    height:700px;
}

    
/* items */

instead of the div being the same, just with different text displayed, the original div gets pushed to the left of the screen, and the comics div is on the very right. how do i get this to work??

Tags:

2

Answers


  1. 0

    I agree with RiverTam. This is a job for JS, not CSS. You will want to create an event listener that listens for a click and then runs a script when clicked. If you aren’t familiar, here is a good place to start: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

    Login or Signup to reply.
  2. 0

    You can do this with just HTML and CSS – but it may not be a suitable way, it depends entirely on your actual use case.

    Here’s an example, it uses the HTML input type radio for each button. They are styled using a label element and the text for each div follows afterwards. It is set to be hidden unless the relevant input is checked.

    As they are radio inputs all with the same name there can only be one checked at a time, hence it gives the effect required.

    <style>
  input[name="text"] {
    opacity: 0;
  }
  
  label {
    background-color: #eeeeee;
    padding: 10px;
    border-radius: 10px;
  }
  
  input[name="text"]+*+* {
    display: none;
    position: absolute;
    left: 0;
  }
  
  input[name="text"]:checked+*+* {
    display: block;
  }
</style>
<input id="one" type="radio" name="text" checked><label for="one">First</label>
<div>FIRST TEXT</div>
<input id="two" type="radio" name="text"><label for="two">Second</label>
<div>SECOND TEXT</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search