I have questions that when clicked on it, the onclick event is called a div that is in display - none appears

Question

I have questions that when clicked on it, the onclick event is called a div that is in display - none appears

Navigation

#1 by (1 votes)
#2 by (1 votes)

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

asked by anonymous 26.03.2018 / 00:19

2 answers

Configuring Multiple Databases in Spring Boot Use of repetition loop appropriately

score 1 · Answer 1

Since you are making use of the jQuery library, you do not have to create a function. If it is more of a question, I recommend putting div inside the a tag:

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

In the JavaScript tag

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

Clicking on an element that has the attribute class set to pergunta will display or hide the div response that is inside 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><ahref="#" 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>

score 1 · Answer 2

I may have misunderstood but I think it's more or less so 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>