Есть ли какой-либо аккордеон для JQuery

Question

Мне нужно использовать панель с кратким текстом в ней и кнопку под ней. Когда я нажимаю кнопку, панель открывается и появляется больше текста, а кнопка меняет внешний вид и находится под текстом. Вы можете увидеть изображение: Я нашел некоторые темы о JQuery и аккордеоне: thread или, может быть, other website, но у меня нет функциональности, которую я ищу.

Есть ли какой-либо другой известный образец, чтобы сделать это, или мне нужно его написать?

Answer 1

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

$(function() { 
 
    $(".see-more").hide(); 
 
    $(".see-more-trigger").click(function() { 
 
    $this = $(this); 
 
    $this.prev(".see-more").slideToggle(function() { 
 
     if ($this.prev(".see-more").is(":visible")) 
 
     $this.html("▲"); 
 
     else 
 
     $this.html("▼"); 
 
    }); 
 

 
    return false; 
 
    }); 
 
});

* {font-family: 'Segoe UI'; text-decoration: none; margin: 0 0 10px;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi hic perspiciatis corporis explicabo, aperiam veritatis impedit natus et voluptatum quas facere dolores nam enim illo harum dolore recusandae tenetur reiciendis! 
 
    <br /><span class="see-more">Ad, facere illo, minima ipsa facilis voluptatibus provident expedita quos in, dignissimos earum vitae consequuntur blanditiis optio sed porro nostrum a soluta corporis. Culpa, non, ipsa. Deserunt, vitae, magni! Alias. Esse cum inventore amet enim odio deleniti, saepe, cumque quasi ducimus sunt consequuntur obcaecati consequatur sequi hic ut maiores eius quae vel nemo aut atque similique, nobis eligendi labore. Praesentium.</span><a href="#" class="see-more-trigger">&#x25BC;</a> 
 
</p> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia unde, laborum cum asperiores minima sed modi laboriosam architecto nam sapiente. Voluptate commodi, accusantium explicabo vitae, ex dolore quia minima esse. 
 
    <br /><span class="see-more">Eum facilis repudiandae qui dolor voluptatum itaque amet, fuga ducimus velit dolorem, animi eaque quia officiis fugit officia saepe ea, dolore. Itaque molestias vitae, velit, hic impedit ipsa quaerat illum! Ut consequatur fugiat voluptatem libero quis sequi voluptas architecto fuga dolor voluptates nihil minus quidem distinctio natus nam quam totam tenetur eius ullam, necessitatibus harum, quod corporis perferendis enim. Culpa.</span><a href="#" class="see-more-trigger">&#x25BC;</a> 
 
</p> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error est amet iure aliquam iste autem quod ipsa ab harum illo, saepe fugit possimus obcaecati accusantium cumque optio repudiandae itaque facilis. 
 
    <br /><span class="see-more">Enim illo ad, tenetur, ipsum id corporis minima, voluptatum fugit, nihil explicabo maiores unde! Id eveniet, pariatur, quis qui beatae ipsa. Vel recusandae numquam reiciendis, dolorem ipsam tempora dolorum perspiciatis! Rerum, explicabo dicta quos, optio pariatur, cum expedita cumque et ratione recusandae voluptatum quis fuga veniam fugit nemo! Cupiditate error omnis fugit ipsa, vero architecto corrupti. Provident ab, consequatur voluptate.</span><a href="#" class="see-more-trigger">&#x25BC;</a> 
 
</p> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit sed vero praesentium cumque libero inventore id optio eaque, totam vel at repellat. Dignissimos, in. Accusantium atque tempore, cupiditate earum quidem! 
 
    <br /><span class="see-more">Omnis numquam quod veniam ratione explicabo, sequi iusto quibusdam ex, sunt tempora voluptatem nam inventore minima! Omnis, esse, impedit. Nobis debitis harum sed atque. Eveniet voluptate commodi quaerat velit aut! Quae quaerat dolorum quam optio vitae delectus, eligendi mollitia non inventore autem. Voluptate aperiam, natus necessitatibus optio iure! Neque fuga suscipit, maxime illo itaque ratione facere laboriosam ipsum delectus? Voluptatum.</span><a href="#" class="see-more-trigger">&#x25BC;</a> 
 
</p> 
 
<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ea! Veniam cum unde quia, aspernatur dolorum, mollitia fuga nisi debitis vitae eaque sapiente deserunt, eligendi maiores tempora magnam a reiciendis. 
 
    <br /><span class="see-more">Id praesentium ea sit quae, sequi veritatis alias mollitia aspernatur animi atque eaque nesciunt aut ducimus sunt maxime non numquam magni dignissimos! Ducimus consequatur facere delectus adipisci saepe dolorum corporis. Iure inventore blanditiis sit ab maxime, fuga repellat dignissimos velit, quaerat cupiditate consequuntur iste mollitia ut alias non. Veritatis perspiciatis sint optio modi, esse perferendis culpa velit nostrum commodi maxime.</span><a href="#" class="see-more-trigger">&#x25BC;</a> 
 
</p>