The spoiler is a convenient tool for the site. It is widely used in various forums and blogs, allowing the user to hide a specific element at the time of a button press. Moreover, the spoiler looks good on the site and helps to hide those parts that unnecessarily overload the page.
It is necessary
Jquery library
Instructions
Step 1
You can implement the spoiler using the popular jquery plug-in library written in the Java Script programming language. It is used to implement full interaction of the programming language with the HTML markup code of the page. The jquery connection is done using HTML using the tag. You must specify the location where the script is located and set its type: $ (document).ready (function ()
Step 2
The text fragment specified within a certain paragraph must be enclosed in a separate layer - a div, with the help of which the spoiler itself will be controlled: Sasha walked along the highway and sucked drying.
Step 3
Next, you need to create appropriate buttons in front of all divs named spoil, which will collapse and expand the text. First, the spoiler itself is hidden using the standard "hide ()" function: $ (“div [name = 'spoil']”). Hide (); Next, you need to create a text and an image for all spoilers, which will be used as a background for the buttons: $ (“P [name = 'spoilbutton']”). Html (“Show text”);
Step 4
Find all the buttons on the page and check for first level headings in front of the button. To do this, create a condition that will search for h1 tags by name. The specified title text wraps into the div itself: $ (“p [name = 'spoilbutton']”). Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton =“”+ $ (this).prev (this).html () +” Show text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Step 5
Next, you need to handle the click of the mouse button with click. If a click is detected, it can be displayed: $ (“div [name = 'spoilbutton']”). Click (function () {If ($ (this).next (this).css (“display”) ==” block”) {
Step 6
Then write inheritance. Within a div, the text is in paragraph p, the content of which is placed in a span tag: $ (this).children (“p”). Children (“span”). Html (“Show text”); Collapse open spoiler. If it is not open, expand the text. This step is based on the inheritance rule: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Hide text”); $ (this).next (this).slideDown (“normal”);} return false; })
Step 7
Then the very click of the mouse on the button is recorded, by which the script will hide and unfold the spoiler. $ (“P [name = 'spoilbutton']”). Click (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp (“normal”); $ (this).html (“Hide”);} return false;}); Spoiler ready. It will appear when a matching DIV block is found.
