jQuery toogle noob

zynif · 13 Σεπτεμβρίου 2015

Καλημέρα,

Έχω το παρακάτω snippet

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
    
	$("#titlos1").click(function() {
	    $("#area1").toggle();	
	});
		
	$("#titlos2").click(function() {
	    $("#area2").toggle();	
	});
	
        });
  </script>
</head>
</body>

<div id="wrapper">

<div class="Panel">
  <div class="title" id="titlos1">Item 1</div>
  <textarea id="area1" rows="10" cols="60"></textarea>
</div>

<div class="Panel">
  <div class="title" id="titlos2">Item 2</div>
  <textarea id="area2" rows="10" cols="60"></textarea>
</div>
</div>
</body>
</html>

Θέλω κάθε φορά που κάνει ο χρήστης κλικ στο div title το αντίστοιχο textarea να κρύβεται/ εμφανίζεται.

Προφανώς αν έχω μερικές δεκάδες τέτοια title δεν γίνεται να έχω άλλα τόσα ids για το area και το title όπως έχω γράψει μέσα στο <script></script>. Υπάρχει καλύτερος τρόπος;

nikos_91 · 13 Σεπτεμβρίου 2015



<html>

<head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <script>

$(document).ready(function(){

  $('.panel').each(function() {

    var $panel = $(this);



    $(".title", $panel).click(function(e) {

      e.preventDefault();

      $div = $(".area", $panel);

      $div.toggle();

      $(".area").not($div).hide();

      return false;

    });



});

  $('html').click(function(){

    $(".area").hide();

  });

     

});

</script>

</head>

</body>





<div id="wrapper">



<div class="panel">

  <div class="title" href="#">Item 1</div>

    <textarea class="area" rows="10" cols="60" style="display: none;"></textarea>

</div>



<div class="panel">

  <div class="title" href="#">Item 2</div>

   <textarea class="area" rows="10" cols="60" style="display: none;"></textarea>

</div>



<div class="panel">

  <div class="title" href="#">Item 3</div>

   <textarea class="area" rows="10" cols="60" style="display: none;"></textarea>

</div>



</div>

</body>

</html>

Επεξ/σία 13 Σεπτεμβρίου 2015 από nikos_91

Giorgos65ert · 13 Σεπτεμβρίου 2015

Εγώ αν το έπιασα καλά θες έναν τρόπο γρήγορο και αποτελεσματικο, άπλα όταν πάτα κάποιος τον τίτλο ενός textarea να κάνει toggle το textarea?

Δες αυτό μια:

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script>
      $(document).ready(function () {
       $("textarea").click(function(){
          return false;
       });
       $(".Panel").click(function(){
          $(this).find("textarea").toggle();
       });
      });
    </script>
  </head>
  </body>
  <div id="wrapper">
    <div class="Panel">
      <div class="title">Item 1</div>
      <textarea class="area" rows="10" cols="60"></textarea>
    </div>


    <div class="Panel">
      <div class="title">Item 2</div>
      <textarea class="area" rows="10" cols="60"></textarea>
    </div>
  </div>
  </body>

Επεξ/σία 13 Σεπτεμβρίου 2015 από Giorgos65ert

Σύνδεση

jQuery toogle noob

Προτεινόμενες αναρτήσεις

zynif

nikos_91

Giorgos65ert

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση