Spoiler CSS. How to make arrows?

All kind time of day. I'm doing a website and found how to make a spoiler. This example worked perfectly for me: jsfiddle.net/ERAFY/x8FQJ/1/. But the problem is, I couldn't do instead of a button, the arrow, like here for example: wp-lessons.com/strelki-s-pomoshu-css. So that when the opening and closing of the arrows changed. Please help
July 12th 19 at 16:38
3 answers
July 12th 19 at 16:40
I understand You well, jquery is not familiar, so either read and understand or to use ready decisions, for example:
getbootstrap.com/javascript/#collapse
or any other accordion

Here's a simple example to understand - sort it out:
jsfiddle.net/x8FQJ/208
I don't quite understand how it is implemented there, how to set the condition to button changed? - vincenza73 commented on July 12th 19 at 16:43
I sold You: jsfiddle.net/x8FQJ/208 - Rey_Wate commented on July 12th 19 at 16:46
sorry didn't wait just immediately. but the problems, the text on the side is deployed, it is necessary that the bottom - vincenza73 commented on July 12th 19 at 16:49
: Add styles. I gave You the solution, but the point is that I think You will be able to solve - Rey_Wate commented on July 12th 19 at 16:52
unfortunately no, I only learn html and css. please help, ready-made solution I quickly understand - vincenza73 commented on July 12th 19 at 16:55
Maxim that's got to decide jsfiddle.net/x8FQJ/240 But for some reason the text goes to the left. How to make it in the middle was - vincenza73 commented on July 12th 19 at 16:58
: This is a question of layout, have you set margin-left: 30%; and width: 100%; what do You expect? - Rey_Wate commented on July 12th 19 at 17:01
July 12th 19 at 16:42
something like that
jsfiddle.net/ddmitrey/wyddcfL1
not working your solution - vincenza73 commented on July 12th 19 at 16:45
that turned out to decide jsfiddle.net/x8FQJ/240 But for some reason the text goes to the left. How to make it in the middle was - Rey_Wate commented on July 12th 19 at 16:48
you instead
background-image:url('img-up.png'); background-image:url('img-down.png');
add a link to the pictures
and the picture of the other

well, or in styles, is this picture possible on css to make it like a triangle was.
change where links to images, and it will work - vincenza73 commented on July 12th 19 at 16:51
changed, the picture is displayed by repeating the entire line with text, and the cube remains - Rey_Wate commented on July 12th 19 at 16:54
damn you background wrote, that's why the picture is displayed as the background - vincenza73 commented on July 12th 19 at 16:57
: I was still in the wrong line of code inserted
changed, now the background changes - vincenza73 commented on July 12th 19 at 17:00
: jsfiddle.net/ddmitrey/wyddcfL1/1 - Rey_Wate commented on July 12th 19 at 17:03
: I do not understand why you did it - vincenza73 commented on July 12th 19 at 17:06
jsfiddle.net/x8FQJ/240 that's almost a turnkey solution, help to understand the text below it at the bottom but in the middle of the page was displayed - vincenza73 commented on July 12th 19 at 17:09
: it will be more clear: in those places where the pasted code to change the color, you will need to paste the code for styling the buttons in the shape of a triangle - Eryn_Torphy93 commented on July 12th 19 at 17:12
:
>sfiddle.net/x8FQJ/240 that's almost a turnkey solution
good luck - vincenza73 commented on July 12th 19 at 17:15
July 12th 19 at 16:44

Find more questions by tags CSSHTML