Select Previous CSS Element

Question

Select Previous CSS Element

Navigation

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

1

I'm trying to select the other parent element of a table , but it is not rolling via CSS .

HTML

<table>
<tr>
   <td>
    <div>
        <input type="radio" class="voo-radio" name="voo-radio">
    </div>
    <div>
        <label> 
              <p>R$ 200,00</span></p>
              <span class="small">Comprar agora</span>
        </label>
     </div>
</td>
</tr>
<tr>
    <td>
      <div class="exibe-detalhes">
       Aqui vem o conteudo
      </div>
    </td>
</tr>
</table>

CSS

.exibir-detalhes {
    display: none;
}
input[type="radio"] {
    display: block;
}
input[type="radio"]:checked + .exibir-detalhes {
    display: block;
}

html css table

asked by anonymous 06.04.2018 / 04:27

2 answers

0

There was an error in your class: in CSS you are exibir-detalhes and in element exibe-detalhes .

With jQuery you can do this by looking for the element of tr after radio clicked:

$(".voo-radio").click(function(){

   $(".exibir-detalhes")
   .hide();
   
   $(this)
   .closest("tr")
   .next("tr")
   .find(".exibir-detalhes")
   .show();
});

.exibir-detalhes {
    display: none;
}
input[type="radio"] {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td><div><inputtype="radio" class="voo-radio" name="voo-radio">
    </div>
    <div>
        <label> 
              <p>R$ 200,00</span></p>
              <span class="small">Comprar agora</span>
        </label>
     </div>
</td>
</tr>
<tr>
    <td>
      <div class="exibir-detalhes">
       Aqui vem o conteudo
      </div>
    </td>
</tr>
<tr>
   <td>
    <div>
        <input type="radio" class="voo-radio" name="voo-radio">
    </div>
    <div>
        <label> 
              <p>R$ 200,00</span></p>
              <span class="small">Comprar agora</span>
        </label>
     </div>
</td>
</tr>
<tr>
    <td>
      <div class="exibir-detalhes">
       Aqui vem o conteudo
      </div>
    </td>
</tr>
</table>

06.04.2018 / 04:54

element overlapping content and footer Send csfr_token from a client

score 0 · Accepted Answer

Only with CSS you can not do this.

Jquery would look like this:

The name of your class exibir-detalhes was named differently in your html and css, so I left both with the same name.

$(document).ready(function() {
  $('.voo-radio').on('change', function() {
    $('.exibir-detalhes').hide();
    
    $($(this).parents('tr').next().find('.exibir-detalhes')).show();
  });
});

.exibir-detalhes {
    display: none;
}
input[type="radio"] {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td><inputtype="radio" class="voo-radio" name="voo-radio">
    </td> 
  </tr> 

  <tr> 
    <td> 
      <div class="exibir-detalhes"> aqui vem um teste 1 </div>
    </td> 
  </tr> 
  
  <tr>  
    <td> 
        <input type="radio" class="voo-radio" name="voo-radio"> 
    </td>
  </tr> 
  
  <tr> 
      <td> 
          <div class="exibir-detalhes"> aqui vem um teste 2 </div> 
      </td> 
  </tr>
</table>