нажмите вниз div, когда скрытый div показывается с помощью jQuery и css?

Question

У меня 5 кнопок, все они содержат разные данные, я хочу, чтобы при нажатии кнопки отображались скрытые данные и нажимался элемент div под ним:

$(".Datanewpost").click(function() {
  $(this).find(".data").toggle();
});

.data {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">

  <div class="Datanewpost">
    Data 1
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd./div>
    </div>
    <div class="Datanewpost">
      Data 2
      <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
    </div>
    <div class="Datanewpost">
      Data 3
      <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd./div>
      </div>
      <div class="Datanewpost">
        Data 4
        <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
      </div>
      <div class="Datanewpost">
        Data 5
        <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
      </div>
    </div>

Сейчас это просто переключение элементов без нажатия на них, что мне нужно изменить, чтобы получить то, что я хочу?

Answer 1

После настройки разметки мы будем использовать метод slideToggle для выполнения вашей задачи:

   
 

$(".Datanewpost").click(function() {
  $(this).find(".data").slideToggle();
});

.data {
  display: none;
}

<div class="data-main">
  <div class="Datanewpost">
    Data 1
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 2
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
  </div>
  <div class="Datanewpost">
    Data 3
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 4
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
  </div>
  <div class="Datanewpost">
    Data 5
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Подробнее о slideToggle методе.

Надеюсь, что я нажалвам дальше.

Answer 2

Я сделал некоторые изменения, просто посмотрите на это

window.onload=function()
{
var btn=document.getElementsByClassName('Datanewpost');
for(var i=0;i<btn.length;i++)
{
 btn[i].onclick=function()
 {
   var data=document.getElementsByClassName('data');
   for(var i=0;i<data.length;i++)
   data[i].style.maxHeight="0px";
   this.nextElementSibling.style.maxHeight="1000px";
   this.nextElementSibling.style.transition="0.4s ease";
   }
 
 }
}

.data {
  max-height:0px;
  overflow:hidden;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">

  <div class="Datanewpost">
    Data 1
   </div>
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
    
    <div class="Datanewpost">
      Data 2
    </div>  
      <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
   
    <div class="Datanewpost">
      Data 3
     </div>
      <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
     
      <div class="Datanewpost">
        Data 4
      </div>
        <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
      
      <div class="Datanewpost">
        Data 5
      </div>
        <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.</div>
     
    </div>

Answer 3

При закрытии div'ов вы пропустили <

$(".Datanewpost").click(function() {
  $(this).find(".data").toggle();
});

.data {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data-main">
  <div class="Datanewpost">
    Data 1
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 2
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 3
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 4
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
  <div class="Datanewpost">
    Data 5
    <div class="data"> Lorem ipsum to roboczy tekst używany do celów projektowych, zwykle do prezentacji kroju pisma, kompozycji, układu kolumn, wyglądu składu, typografii itd.
    </div>
  </div>
</div>