Как использовать Twitter Bootstrap Свернуть, чтобы показать часть текста, а затем остальные

Question

У меня есть текст, который я показываю из базы данных. Я хотел бы иметь часть текста, отображаемого при загрузке страницы (до определенного номера символа), а затем отображать остальную часть текста, используя функцию «свернуть» из Twitter Bootstrap. Я не уверен, как это сделать. Это то, что я до сих пор:

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">See More...</a> 
<div id="collapseOne" class="accordion-body collapse"><span class="description_text">{{$artist->description}}</span></div> 

Это будет отображать весь текст, содержащийся в поле «Описание» на щелчке «увидеть более» ссылку. То, что я хотел бы иметь, - это часть текста, отображаемого при загрузке страницы, а затем остальные отображаются (и переключаются) по нажатию кнопки «Подробнее». Также было бы неплохо изменить кнопку «видеть больше», чтобы «видеть меньше», когда отображается полный текст.

Answer 1

Вы можете запускать PHP внутри тегов клипов, так что;

<a class="accordion-toggle" data-toggle="collapse" 
    data-parent="#accordion2" href="#collapseOne"> 
    {{ substr($artist->description,0,30).'...' }} 
</a> 

Последний параметр зиЬзЬг является количество символов, чтобы включить

Чтобы изменить текст ссылки, вам нужно будет написать несколько JQuery, чтобы поймать show.bs.collapse обратного вызова и заменить innerhtml из ссылка.

Этот Twitter bootstrap 3.0 icon change on collapse похож, но меняет значок.