I have questions that when you click on it, the onclick event is called a div that is on display - None appear

Asked

Viewed 46 times

1

HTML

<a href="#" onclick="Resposta()">
  <li>Como comprar passagem?</li>
</a>
<div class="resposta_duvida">Apareça por favor</div>

CSS

.resposta_duvida{
    display: none;
}

JAVASCRIPT

<script>
    function Resposta(){
    $(document).ready(function() {
        $(".resposta_duvida").click(function(){
        }); 
    });
}
</script>`
javascript css

  • You want to click on: <a href="#" onclick="Resposta()"> appear <div class="resposta_duvida"> ?

  • That’s right, you can help me?

  • The HTML structure is only that item or there are more questions ?

  • yes, thank you very much worked perfectly, would you please explain to me

  • my answer helped?

  • Yes, I’d like you to explain

  • Bruna da para resolver isso só com CSS e usando checkbox para mostrar e esconder a div, nem precisa de JS, se quer eu faço um modelo de exemplo para vc é bem simples até

Show 2 more comments

2 answers

1

I may have misunderstood but I think that’s just how css

<style>
    #div_email {
        display: none;
    }
</style>

HTML

<a id='a' href="#">Como comprar passagem</a>
<div id="div_email">
    Para comprar pasagem você deve ....
</div>

javascript

<!-- javascript -->
<script type="text/javascript">
    var btn = document.getElementById('a');
    var div = document.getElementById('div_email');
    btn.addEventListener('click', function() {
        if(div.style.display != 'block') {
            div.style.display = 'block';
            return;
        }
        div.style.display = 'none'; 
    });

</script>

  • Thank you, you helped me a lot

1

How you are making use of the library jQuery does not need to create a function. If it is more than one question, I recommend to div within the tag a:

<a href="#" class="pergunta">
  <li>Como comprar passagem?</li>
  <div class="resposta">Apareça por favor</div>
</a>

Already in the code Javascript

$(document).ready(function() {
  $('.pergunta').on('click', function() {
    $(this).find(".resposta").toggle();
  });
});

By clicking on an element that has the attribute class defined as pergunta will display or hide the div response that is within the element.

Example:

$(document).ready(function() {
  $('.pergunta').click(function() {
    $(this).find(".resposta").toggle();
  });
});
.pergunta {
  text-decoration: none;
}
.pergunta li {
  list-style: none;
  margin-bottom: 14px;
}
.resposta {
  display: none;
  margin-bottom: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="pergunta">
  <li>Como comprar passagem?</li>
  <div class="resposta">Apareça por favor</div>
</a>
<a href="#" class="pergunta">
  <li>Como comprar passagem?</li>
  <div class="resposta">Apareça por favor</div>
</a>

  • Thank you, you helped me a lot

Browser other questions tagged javascript css

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