slideToggle hides multiple divs when to hide / display only one at a time

Navigation
3

I have several records in PHP, and when I click on a link "More information" opens a <div> hidden, but clicking this link opens the <div> hidden from all records.

My Javascript code is as follows: 

function abreFecha(sel) {
  $(sel).slideToggle();
}

css: 

.mapa{
display:none;
}

link: 

 <div class="maisinfo"><a href="javascript:abreFecha('.mapa')">+</a></div>

div: 

<div class="mapa"> <?php echo $row_RS_busca['mapa']; ?> </div>

And another detail, all this is inside a PHP do. In other words, it is showing all records.

As requested! I'm posting the html structure 

<?php do { ?>
    <div class="caixa">
     <div class="maisinfo"><a href="javascript:abreFecha('.mapa')">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6"><?php echo $row_RS_busca['telefone']; ?></td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa"> <?php echo $row_RS_busca['mapa']; ?> </div>

  <?php } while ($row_RS_busca = mysql_fetch_assoc($RS_busca)); ?>
    
asked by anonymous 18.06.2015 / 20:13

2 answers

1

Apparently you are using jQuery , in which case you could avoid using the javascript: protocol and use something less obstructive such as $(document).on('click', seu seletor) combined with the .parents() (or .parent ) along with .nextAll( ".mapa:first" ) of jquery as well. It would look something like:

JavaScript (can be inside a .js file): 

$(function() {
    $(document).on('click', '.caixa .maisinfo a', function() {
        var $this = $(this);

        $this.parent()
            .parent()
                .nextAll( ".mapa:first" ) //Isto vai procurar o mapa a seguir do elemento .caixa
                   .slideToggle();
    });
});

html: 

<?php do { ?>
    <div class="caixa">
     <div class="maisinfo"><a href="javascript:void(0);">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6"><?php echo $row_RS_busca['telefone']; ?></td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa"> <?php echo $row_RS_busca['mapa']; ?> </div>

  <?php } while ($row_RS_busca = mysql_fetch_assoc($RS_busca)); ?>


$(function() {
    $(document).on('click', '.caixa .maisinfo a', function() {
        var $this = $(this);

        $this.parent()
            .parent()
                .nextAll( ".mapa:first" ) //Isto vai procurar o mapa a seguir do elemento .caixa
                   .slideToggle();
    });
});
.mapa{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="caixa">
 <div class="maisinfo"><a href="javascript:void(0);">+</a></div>
  <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
      <td height="31" colspan="2"><span class="style5">Nome 1</span></td>
    </tr>
    <tr>
      <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
      <td width="450" align="left" valign="bottom" class="style6">Telefone 1</td>
    </tr>
    <tr>
      <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
      <td align="left" valign="top" class="style6">Endereço 1</td>
    </tr>
    </table>
</div>
<br/>
<div class="mapa">Mapa 1</div>

<div class="caixa">
 <div class="maisinfo"><a href="javascript:void(0);">+</a></div>
  <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
      <td height="31" colspan="2"><span class="style5">Nome 2</span></td>
    </tr>
    <tr>
      <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
      <td width="450" align="left" valign="bottom" class="style6">Telefone 2</td>
    </tr>
    <tr>
      <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
      <td align="left" valign="top" class="style6">Endereço 2</td>
    </tr>
    </table>
</div>
<br/>
<div class="mapa">Mapa 2</div>
    
22.06.2015 / 19:58
2

Assuming your code is already ok, and you use jquery, I'll add a unique identifier for each record and by js call only that unique identifier

Editing to insert a fiddle ... 

 $(function(){
      $('.maisinfo').click(function(){
         idclick = '.mapa_' + $(this).attr('rel');
         $(idclick).slideToggle();
      });

   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="caixa">
     <div><a href="#" class="maisinfo" rel="1">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6">TELEFONE</td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_1" style="display:none">ABRE MAPA LINHA 1</div>
<!-- OUTRA LINHA -->

<div class="caixa">
     <div><a href="#" class="maisinfo" rel="2">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6">TELEFONE</td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_2" style="display:none">ABRE MAPA LINHA 1</div>
<!-- OUTRA LINHA -->

<div class="caixa">
     <div><a href="#" class="maisinfo" rel="3">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6">TELEFONE</td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_3" style="display:none">ABRE MAPA LINHA 3</div>
<!-- OUTRA LINHA -->
<?php 
$count=0;
do { 
?>
    <div class="caixa">
     <div><a href="#" class="maisinfo" rel="<?=$count;?>">+</a></div>
      <table width="510" height="72" border="0" cellpadding="0" cellspacing="4">
        <tr>
          <td width="15" rowspan="3" align="left" valign="top"><p>&nbsp;</p></td>
          <td height="31" colspan="2"><span class="style5"><?php echo $row_RS_busca['nome']; ?></span></td>
        </tr>
        <tr>
          <td width="29" height="16" align="left" class="style3"><img src="imagens/tel.png" width="10" height="15" /></td>
          <td width="450" align="left" valign="bottom" class="style6"><?php echo $row_RS_busca['telefone']; ?></td>
        </tr>
        <tr>
          <td height="17" align="left" class="style3"><img src="imagens/local.png" width="10" height="17" /></td>
          <td align="left" valign="top" class="style6"><?php echo $row_RS_busca['endereco']; ?></td>
        </tr>
        </table>
    </div>
    <br/>
    <div class="mapa_<?=$count;?>" style="display:none"> <?php echo $row_RS_busca['mapa']; ?> </div>

  <?php 
    $count++;
 } while ($row_RS_busca = mysql_fetch_assoc($RS_busca)); ?>

JS: 

<script type="text/javascript">
   $(function(){
      $('.maisinfo').click(function(){
         idclick = '.mapa_' + $(this).attr('rel');
         $(idclick).slideToggle();
      });

   });
</script>
    
18.06.2015 / 22:37
What's the difference of loading javascript into script or external file? Inheritance with Repository Pattern