jQuery slider
The first post I posted on Habré :)
Probably many have seen pretty miscarriages-sliders (a text or something else leaves on click). I will try to tell how this can be done and I will suggest places for use.
Go :)
What we need:
1. Actually jQuery library itself
2. A little time
3. Desire :)
Go. For clarity, example: demo .
There are 3 options for the slider behavior:
1. All items are closed. Then you need to open only the one that is selected.
2. One item is open and needs to be closed.
3. There are open items, but have chosen one of the closed ones, at the same time a new item should open, and open ones should curl up.
')
Preparatory work:
1. We connect jQuery library.
2. We define the classes of the elements used. In this example, we have a container id = "faq" (in principle, you can do without the container identifier), the element that, upon clicking on which some text will unfold, will be <p class = "question"> </ p> , and the actual container for the appearing text <p class = "answer"> </ p>.
3. Naturally, the unwrapping container should be hidden initially, therefore we prescribe the style
4. Create a js file, for example, js.js.
Now html:
Now consider all our options for the behavior of the slider.
1. All items are closed. Then you need to open only the one that is selected.
By clicking on the function is called, which finds the next container, which should turn naturally. If it is closed, then deploy it.
2. One item is open and needs to be closed.
Modifying a bit of code, whether we already have a check whether the slider is displayed or not, you only need to add a collapse if the element is already open.
3. There are open items, but have chosen one of the closed ones, at the same time a new item should open, and open ones should curl up.
To do this, you need to find already open <p class = "answer">. First, they collapse, and then expand the new slider. Opening after closing is provided by a callback function. At the same time, it is necessary to check if there are open elements (if they are not there, the slider does not work for opening) and whether the open element is the same one that was clicked (in this case, you just need to minimize it).
And combining all three cases into one script we get:
Application
The first thing that comes to mind is the menu. In cases where first-level links do not lead anywhere, for example.
In projects I develop, I usually use question-type sections (FAQ). In principle, an example is a simplified version of the display FAQ :).
I hope the first pancake did not come out lumpy and helped someone.
Thank.
Probably many have seen pretty miscarriages-sliders (a text or something else leaves on click). I will try to tell how this can be done and I will suggest places for use.
Go :)
What we need:
1. Actually jQuery library itself
2. A little time
3. Desire :)
Go. For clarity, example: demo .
There are 3 options for the slider behavior:
1. All items are closed. Then you need to open only the one that is selected.
2. One item is open and needs to be closed.
3. There are open items, but have chosen one of the closed ones, at the same time a new item should open, and open ones should curl up.
')
Preparatory work:
1. We connect jQuery library.
2. We define the classes of the elements used. In this example, we have a container id = "faq" (in principle, you can do without the container identifier), the element that, upon clicking on which some text will unfold, will be <p class = "question"> </ p> , and the actual container for the appearing text <p class = "answer"> </ p>.
3. Naturally, the unwrapping container should be hidden initially, therefore we prescribe the style
.answer {display: none}4. Create a js file, for example, js.js.
Now html:
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="/demo/style.css" /> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/demo/js.js"></script> </head> <body> <div id="faq"> <p class="question"> 1</p> <p class="answer"> <br /> <br /> </p> <p class="question"> 2</p> <p class="answer"> <br /> </p> <p class="question"> 3</p> <p class="answer"> <br /> <br /> <br /> </p> </div> </body> </html>Now consider all our options for the behavior of the slider.
1. All items are closed. Then you need to open only the one that is selected.
$(".question").click(function(){ $slider = $(this).next(); if ($slider.is(":hidden")){ $slider.slideDown("slow"); } });By clicking on the function is called, which finds the next container, which should turn naturally. If it is closed, then deploy it.
2. One item is open and needs to be closed.
Modifying a bit of code, whether we already have a check whether the slider is displayed or not, you only need to add a collapse if the element is already open.
$(".question").click(function(){ $slider = $(this).next(); if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } });3. There are open items, but have chosen one of the closed ones, at the same time a new item should open, and open ones should curl up.
To do this, you need to find already open <p class = "answer">. First, they collapse, and then expand the new slider. Opening after closing is provided by a callback function. At the same time, it is necessary to check if there are open elements (if they are not there, the slider does not work for opening) and whether the open element is the same one that was clicked (in this case, you just need to minimize it).
$(".question").click(function(){ $other = $(this).parent().find(".answer:visible"); $slider = $(this).next(); if ($other.length > 0 && $slider.is(":hidden")){ $other.slideUp("slow", function(){ if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } }); } });And combining all three cases into one script we get:
$(document).ready(function(){ $(".question").click(function(){ $other = $(this).parent().find(".answer:visible"); $slider = $(this).next(); if ($other.length > 0 && $slider.is(":hidden")){ $other.slideUp("slow", function(){ if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } }); } else { if ($slider.is(":hidden")){ $slider.slideDown("slow"); } else{ $slider.slideUp("slow"); } } }); });Application
The first thing that comes to mind is the menu. In cases where first-level links do not lead anywhere, for example.
In projects I develop, I usually use question-type sections (FAQ). In principle, an example is a simplified version of the display FAQ :).
I hope the first pancake did not come out lumpy and helped someone.
Thank.
Source: https://habr.com/ru/post/43820/
All Articles