Спойлер на CSS. Как сделать стрелки?

Question

[Andrey Rybalko]

Всем доброго времени суток. Я делаю сайт, и нашел как сделать спойлер. Вот этот пример мне очень подходит: jsfiddle.net/ERAFY/x8FQJ/1/. Но проблема, я не смог сделать вместо кнопки, стрелки, такие как здесь к примеру: wp-lessons.com/strelki-s-pomoshu-css. Чтобы при открытии и закрытии стрелки менялись. Помогите пожалуйста

Answer 1

[Максим Тимофеев]

Я так понимаю Вы с jquery ну совсем не знакомы, а значит стоит либо почитать и разобраться или использовать готовые решения, например:
getbootstrap.com/javascript/#collapse
или любой другой аккордеон

Вот Вам простой пример для понимания - разбирайтесь:
jsfiddle.net/x8FQJ/208

Comments

[Andrey Rybalko]

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

[Максим Тимофеев]

Andrey Rybalko: Я же Вам реализовал: jsfiddle.net/x8FQJ/208

[Andrey Rybalko]

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

[Максим Тимофеев]

Andrey Rybalko: Добавьте стилей. Я дал Вам решение, но такие мелочи думаю Вы сами сможете решить

[Andrey Rybalko]

Максим Тимофеев: к сожалению нет, я только осваиваю html и css. пожалуйста помогите, готовое решение я быстро пойму

[Andrey Rybalko]

Максим Тимофеев: Максим вот получилось решить, jsfiddle.net/x8FQJ/240 Но почему то текст влево уезжает. Как сделать чтобы он по середине был

[Максим Тимофеев]

Andrey Rybalko: Это уже вопрос верстки, у вас задан margin-left: 30%; и width: 100%; чего Вы ожидали?

Answer 2

[Дмитрий]

как-то так
jsfiddle.net/ddmitrey/wyddcfL1

Comments

[Andrey Rybalko]

не работает ваше решение

[Andrey Rybalko]

вот получилось решить, jsfiddle.net/x8FQJ/240 Но почему то текст влево уезжает. Как сделать чтобы он по середине был

[Дмитрий]

Andrey Rybalko: так вы вместо
background-image:url('img-up.png'); и background-image:url('img-down.png');
добавьте ссылку на сами картинки
и будет картинка другой

ну или в стилях, вместо этой картинки можно на css сделать, чтоб оно как треугольник было.
меняйте там, где ссылки на картинки, и все заработает

[Andrey Rybalko]

dimasmagadan: менял, картинка повторяясь отображаются по всей строке с текстом, а кубик так и остается

[Andrey Rybalko]

блин ты же background написал, вот почему картинка отображается как фон

[Дмитрий]

Andrey Rybalko: я там еще и не в ту строчку код вставил
поменял, сейчас фон меняет

[Дмитрий]

Andrey Rybalko: jsfiddle.net/ddmitrey/wyddcfL1/1

[Andrey Rybalko]

dimasmagadan: я не понял зачем ты это сделал

[Andrey Rybalko]

jsfiddle.net/x8FQJ/240 вот почти готовое решение, помоги только разобраться с текстом, чтобы он также внизу но по середине страницы отображался

[Дмитрий]

Andrey Rybalko: так будет понятнее: в те местах, где вставлен код для изменения цвета, нужно будет вставить код для стилизации кнопки в виде треугольника

[Дмитрий]

Andrey Rybalko:
>sfiddle.net/x8FQJ/240 вот почти готовое решение
удачи

Answer 3

[Andrey Rybalko]

jsfiddle.net/x8FQJ/242