slideToggle hides multiple Ivs when it should hide/display only one at a time

Asked

Viewed 364 times

3

I have several records in PHP, and when clicking one link "More information" opens a <div> hidden, but when clicking on 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 within a PHP’s. Ie is showing all the records.

As requested! I am 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)); ?>
php javascript java jquery css
  • 3

    What is the structure of HTML? instead of this selector which is generic .mapa you could pass an element, or another more specific selector... if you put the HTML structure it is easy to solve.

  • Open all records because the class selector returns a list, you have to grab the Parent from the clicked button or something more specific.

  • Instead of passing . map, pass something like #Mapa1. When passing . map ALL HTML elements with class . map will open.

  • Thanks for adding HTML! So what you need is to open div .mapa that’s following the div .caixa where you click on the link inside .maisinfo, correct?

  • Yes yes, I need this. But when I click open all

2 answers

2

Assuming your code is already ok, and that you use jquery, I will add a unique identifier for each record and by js calling only this 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>


    <div class="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>

  • face, did not show the div when clicking

  • I added a fiddle to the answer. Open and see the example working. NOTE THE FACT that I changed the class "maisinfo" to the link, and on the same link added the tag "rel"

  • Until then what you did is right, but I didn’t want to do a div for each line, because it’s a lot of records

  • What did you want to do then?

1


Apparently he’s using jQuery, in case you could avoid using the "protocol" javascript: and use something less obstructive as for example $(document).on('click', seu seletor) combined with the function .parents() (or .parent) along with .nextAll( ".mapa:first" ) jquery also. It would look something like:

Javascript (can be inside a file . js):

$(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>

<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 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>

Browser other questions tagged php javascript java jquery css

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