Display div when clicking another, several with javascript

Asked

Viewed 167 times

0

Hello personal I need to display a text that is in a certain div in a listing that I did the problem that the div and the class have the same name, for example below. 

<div class="item" id="faq">
                      <div class="title"><b>Ola titulo todos</b></div>
                      <div class="text" style="display:none;">Teste de mensagem todos</div>
                
</div>
<div class="item" id="faq">
                      <div class="title"><b>Ola titulo todos</b></div>
                      <div class="text" style="display:none;">Teste de mensagem todos</div>
                
</div>
<div class="item" id="faq">
                      <div class="title"><b>Ola titulo todos</b></div>
                      <div class="text" style="display:none;">Teste de mensagem todos</div>
                
</div>

javascript

  • Semantically, the ID of a tag should always be unique. Classes can be repeated. Otherwise you won’t be able to know which tag the texts are being displayed in.

  • and if id is different? how would you do?

  • would have to pass the correct id?

  • If id is different, example: <div id="faq1">...</div><div id="faq2">...</div> you could use a JQuery selector normally: $("#faq1").html().

  • how would you do that friend?

  • 1

    How would you do what? I put in the example: $("#faq1").html(). In that case if you give one console.log($("#faq1").html()); your return will be: <div class="title"><b>Ola titulo todos</b></div>&#xA; <div class="text">Teste de mensagem todos</div> is not just what you want?

  • I changed the code above I think that now you would understand for example the div she this style="display:None;" do not show and I want to click on Faq it shows that text that is hidden.

  • I’ve decided thanks already friend.

Show 3 more comments

2 answers

1

See an example with pure Javascript and no need to use ID.

var x = document.getElementsByClassName("text");

x[0].style.display = "block"; // onde 0 é o índice.

x[1].style.display = "block"; // onde 1 é o índice.
x[1].style.color = "red"; // onde 1 é o índice.

x[2].style.display = "block"; // onde 2 é o índice.
x[2].style.color = "blue"; // onde 2 é o índice.
<div class="item" id="faq">
                      <div class="title"><b>Ola titulo todos</b></div>
                      <div class="text" style="display:none;">Teste de mensagem todos</div>
                
</div>
<div class="item" id="faq">
                      <div class="title"><b>Ola titulo todos</b></div>
                      <div class="text" style="display:none;">Teste de mensagem todos</div>
                
</div>
<div class="item" id="faq">
                      <div class="title"><b>Ola titulo todos</b></div>
                      <div class="text" style="display:none;">Teste de mensagem todos</div>
                
</div>

0

Here’s how I handled it. I took the value of the id with click and in the same place that I take.

<script type="text/javascript"> 
function passar(id){ 

var display = document.getElementById(id).style.display;
 if(display == "block")
    document.getElementById(id).style.display = 'none';
else
    document.getElementById(id).style.display = 'block';

}; 

</script>

<?php
$id_log_ass=$_REQUEST['id_log_ass'];


include_once("../config.inc");

$consulta = mysql_query("SELECT * FROM ass_mensag where men_id_ass= 0 or men_id_ass=$id_log_ass order by men_data desc");
$num_rows_men = mysql_num_rows($consulta );


while($linha = mysql_fetch_array($consulta))
{
?>


<div class="item">

                      <div class="title" onclick="passar(<?php echo $linha['id_men'];?>);" ><b><?php echo $linha['men_titulo'];?></b></div>
                      <div class="text" id="<?php echo $linha['id_men'];?>"><?php echo $linha['men_mensagem'];?></div>
                
</div>

<?php
}
?>
</div>

Browser other questions tagged javascript

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