Why doesn’t the contents disappear or appear when I mark the radio buttons?

Asked

Viewed 47 times

0

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: arial;
        }

        #content {
            width: 400px;
            height: 400px;
            background: green;
            text-align: center;
            line-height: 400px;
            color: #ffffff;
        }

        #yes:checked #content {
            display: block;
        }
 
        #no:checked #content{
            display: none;
        }
    </style>
</head>
<body>
    <p>Deseja visualizar o conteúdo?</p>
    <label for="yes">Sim<input id="yes" name="option" type="radio"></label>
    <label for="no">Não<input id="no" name="option" type="radio"></label>
    <div id="content">
        <h1>Conteúdo</h1>
    </div>
</body>
</html>

In the above example it was for when I marked the radio button with id="yes" it be displayed and when mark the radio button with id="no" he disappear, but nothing happens, because?

html css
  • 2

    And the JS is where my friend?

  • 1

    No! is only with CSS

  • 1

    A pseudo-class :checked is used when the element is marked and is what I am doing by marking an element for something to happen to it, but nothing happens the basis is that neither this example https://answall.com/questions/261970/show-hideapenas-com-css

  • In this example you gave me, there’s an answer, it doesn’t help you?

  • No! already solved I left an answer with the solution, but thanks!

  • I saw, I left a +1 by the haha answer

Show 1 more comment

2 answers

2

In what part of the code are you implementing this logic? To do this, GENERALLY get a programming language. In this case, the most used is JS. We could implement what you want, for example, as follows:

function verifica(){
  let rdNao = window.document.querySelector('#no').checked	
  let rdSim = window.document.querySelector('#yes').checked
  let conteudo = window.document.querySelector('#content')
  if(rdNao){
    conteudo.style.display = 'none'
  }else{
    conteudo.style.display = 'block'
  }
}
<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: arial;
        }

        #content {
            width: 400px;
            height: 400px;
            background: green;
            text-align: center;
            line-height: 400px;
            color: #ffffff;
        }

        #yes:checked #content {
            display: block;
        }
 
        #no:checked #content{
            display: none;
        }
    </style>
</head>
<body>
    <p>Deseja visualizar o conteúdo?</p>
    <label for="yes">Sim<input onchange="verifica()" id="yes" name="option" type="radio"></label>
    <label for="no">Não<input onchange="verifica()" id="no" name="option" type="radio"></label>
    <div id="content">
        <h1>Conteúdo</h1>
    </div>
</body>
</html>

But you can also use CSS only.

  • If you need to use javascript or other programming language, as in this answer https://answall.com/a/261985/157404 it was only able to do with CSS ?

  • Has been corrected...

  • No mate! but thank you so much for trying to help in my case I just wanted with CSS, but I already managed to solve and left a reply with the solution, thank you!

1

I managed to solve the problem on the following line:

    #yes:checked #content {
        display: block;
    }

    #no:checked #content{
        display: none;
    }

I’m informing that the element with id="content" is within the element id="yes" and id="no", this because I am using the selector decendente and in which I must use the selector brother since the element id="content" is right after the input elements, so changing the line looks like this:

    #yes:checked ~ #content {
        display: block;
    }

    #no:checked ~ #content{
       display: none;
    }

Then the input elements cannot be within the paragraphs, in these lines they must also be changed if not the brother selector will not select the element id="content":

Before

    <label for="yes">Sim<input id="yes" name="option" type="radio"></label>
    <label for="no">Não<input id="no" name="option" type="radio"></label>

Afterward

    <label for="yes">Sim</label><input id="yes" name="option" type="radio">
    <label for="no">Não</label><input id="no" name="option" type="radio" checked="checked">

The whole code goes like this:

        <!doctype html>
        <html lang="pt-br">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                body {
                    font-family: arial;
                }
        
                #content {
                    width: 400px;
                    height: 400px;
                    background: green;
                    text-align: center;
                    line-height: 400px;
                    color: #ffffff;
                    display: none;
                }
        
                #yes:checked ~ #content {
                    display: block;
                }
        
                #no:checked ~ #content{
                    display: none;
                }
            </style>
        </head>
        <body>
            <p>Deseja visualizar o conteúdo?</p>
            <label for="yes">Sim</label><input id="yes" name="option" type="radio">
            <label for="no">Não</label><input id="no" name="option" type="radio" checked="checked">
            <div id="content">
                <h1>Conteúdo</h1>
            </div>
        </body>
        </html>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.