Как на jQuery свернуть развернуть div?

тогда когда кликаешь по этому же блоку он не закрывается

karpos, чтобы еще и закрывался поменяй .slideDown на .slideToggle

AngReload, спасибо да работает но вот я не придусматрел такое ели я зачу поменять

<div class="pointer">
    Основные сведения
    <div class="slideT" style="display: block; overflow: hidden;">
        блок который нужно свернуть или развернуть
    </div>
</div>

на

<div class="pointer">
   <h3>Основные сведения</h3>
    <div class="slideT" style="display: block; overflow: hidden;">
        блок который нужно свернуть или развернуть
    </div>
</div>

karpos, замени в обоих местах .children() на .children(".slideT")

блин я до конца не понял пока что но оно работает

karpos, код с пояснениями

// $(document).ready(callback) запустит функцию callback когда весь документ загрузится
$(document).ready(function() {
  // сразу при загрузке страницы нам нужно всё свернуть
  $(".slideT") // выбирает все slideT
    .hide(); // и скрывает их

  // и повесить обработчики событий которые в дальнейшем
  // будут делать всю работу по сворачиванию и разворачиванию
  $(".pointer") // выбирает все pointer
    .click(function () { // вешает обработчики события «клик»
      // эта функция запустится при клике на любой pointer
      // this в этой функции указывает на элемент по которому кликнули

      // тут мы развернём блок по которому кликнули
      $(this) // выбирает элемент по которому кликнули
        .children(".slideT") // находит его ребёнка с классом slideT
        .slideToggle("slow"); // запускает его медленное «переключение»*
      
      // *slideToggle - это переключение состояния свёрнуто или развёрнуто,
      // если элемент уже свёрнут, то развернёт. Или наоборот

      // а тут мы свернём все блоки, кроме того по которому кликнули
      $(this) // выбирает элемент по которому кликнули
        .siblings() // выбирает всех его соседей, кроме него самого
        .children(".slideT") // находит их детей с классом slideT
        .slideUp("slow"); // запускает их медленное сворачивание
      // если элементы уже свёрнуты, то slideUp ничего не сделает
    });
})

Всю документацию по всяким штукам вроде slideToggle можно найти на сайте https://api.jquery.com/
Или на русском языке на вики-сайте jquery.page2page.ru
Поочередное разворачивание и сворачивание элементов

да огромное спасибо.
я в прошлый раз допустил ошибку

<script type="text/javascript">    
$(document).ready(function(){
    $(".pointer-text").hide();
    $(".pointer-box").click(function () {
    
      /*$(this).addClass("active");*/    
      // можно и иначе выбрать все другие блоки
      // вот так $(".pointer").not(this)
      $(this).siblings()
        .children(".pointer-text")
        .slideUp(300)
        .prev(".pointer").removeClass("pointer-active");
      $(this)
        .children(".pointer-text")
        .slideToggle(300)
        .prev(".pointer").toggleClass("pointer-active");
    });
})    
</script>

<div class="pointer-box">
<div class="pointer pointer-active">Заголовок</div>
<div class="pointer-text" style="display: block;">здесь будет текст</div>
</div>

<div class="pointer-box">
<div class="pointer">Заголовок</div>
<div class="pointer-text" style="display: none;">
</div>

суть в то что pointer-box это родительский блок и если кликнуть случайно внутри него по любому месту он закроется а это не удобно если внутри блока много текста я решил ввести событие по клику по блок pointer
но тогда получается что блок pointer-text уже не является дочерним он следующий или предыдущий. с раскрытием и закрытием проблем не вознилом я просто .childrenпоменял на .prev . а вот как свернуть все не активные блоки опять не получается пробывал поменять на .prev не получилось

<script type="text/javascript">    
$(document).ready(function(){
    $(".pointer-text").hide();
    $(".pointer").click(function () {
        
      $(this)
        .siblings()
        .children(".pointer-text")  /* пробывал менять на .prev*/
        .slideUp("show")
        .prev(".pointer").removeClass("pointer-active");
      $(this)
        .next(".pointer-text")
        .slideToggle("show")
        .prev(".pointer").toggleClass("pointer-active");
      
    });
})    
</script>

<div class="pointer-box">
<div class="pointer pointer-active">Заголовок</div>
<div class="pointer-text" style="display: block;">здесь будет текст</div>
</div>

<div class="pointer-box">
<div class="pointer">Заголовок</div>
<div class="pointer-text" style="display: none;">
</div>

karpos, не пользуйтесь чужим кодом бездумно, посмотрите что он делает.

Был такой HTML:

<div class="pointer">
    Структура и органы управления образовательной организацией
    <div class="slideT" style="display: block; overflow: hidden;">
        блок который нужно свернуть или развернуть
    </div>
</div>
<div class="pointer">Документы</div>
<div class="pointer">Образование</div>
<div class="pointer">Образовательные стандарты</div>

Что делает $(this).siblings()? Он выбирает соседей кликнутого блока. В этом html:
this — это .pointer <div class="pointer> ... </div>
Для него находим соседей, у него три соседа:

<div class="pointer">Документы</div>
<div class="pointer">Образование</div>
<div class="pointer">Образовательные стандарты</div>

Так мы выбрали все блоки для сворачивания, то что нужно.

Но теперь HTML новый, что сделает всё тот же $(this).siblings()? Он выбирает соседей кликнутого блока. В этом html:

<div class="pointer-box">
  <div class="pointer pointer-active">Заголовок</div>
  <div class="pointer-text" style="display: block;">здесь будет текст</div>
</div>

<div class="pointer-box">
  <div class="pointer">Заголовок</div>
  <div class="pointer-text" style="display: none;">
</div>

this — это .pointer

<div class="pointer pointer-active">Заголовок</div>

Для него находим соседей, у него только один сосед

<div class="pointer-text" style="display: block;">здесь будет текст</div>

Очевидно, мы пошли куда-то не туда, ведь нам нужно было добраться до соседних .pointer-box

Совет:
Вы можете пользоваться console.log() для того чтобы понять как работает ваш код. Например:

console.log($(this));
console.log($(this).siblings());
console.log($(this).siblings().children(".pointer-text"));

— этот код покажет в консоли браузера коллекции элементов на каждом этапе. Так вы смогли бы сами сразу понять где ошиблись или куда идти дальше.

Чтобы их достичь, нужно сначала из this === .pointer добраться до .pointer-box
Это можно сделать с помощью метода parent() — http://jquery.page2page.ru/index.php5/Поиск_элемен...

Новый код $(this).parent().siblings()
this — это .pointer

<div class="pointer pointer-active">Заголовок</div>

Для него находим родителя <div class="pointer-box"> ...блок1... </div>
Для него находим соседей, у него только один сосед <div class="pointer-box"> ...блок2... </div>

Ну и .children(".pointer-text") выберет в этих блоках именно то что нужно сверуть.

Итоговый код:

$(this)
  .parent()
  .siblings()
  .children(".pointer-text")
  .slideUp("show")
  .prev(".pointer").toggleClass("pointer-active");

Но я бы переписал, чтобы не использовать метод prev():

var pointerBoxSiblings = $(this).parent().siblings();

pointerBoxSiblings
  .children(".pointer")
  .toggleClass("pointer-active");

pointerBoxSiblings
  .children(".pointer-text")
  .slideUp("show");

Ну и вторую чать кода можно попроще сделать, без блужданий вперёд и назад:

$(this)
  .toggleClass("pointer-active")
  .next(".pointer-text")
  .slideToggle("show");

$(this)
        .parent() /* переходит из текущего .pointer на уровень выше и выбирает родителе */
        .siblings() /* ищет соседних родителей .pointer-box */
        .children(".pointer-text") /* ищет там вложенный (ребенака ) ponter-text*/
        .slideUp(300)  /*сворачивает */
        .prev(".pointer").removeClass("pointer-active");
        console.log($(this).siblings().children(".pointer-text"));

правильно я понимаю а console.log($(this).siblings().children(".pointer-text")); смотрю в браузере мало что понятно там конечно

Курсор можно навести, тогда браузер подсветит этот элемент на странице: