Spoiler with changing markers

Question

I need to make a block of spoilers that open with a click (there is no problem with this, the code is below). At the same time, by clicking on the icon, the spoiler icon should change from “+” to “-”, and the title of the active spoiler should become bold. after clicking on another spoiler, the previously opened spoiler should close and change its icon back to “+”. in the code below, "+" to "-" changes, but for all spoilers and forever (I'm new to JS and can't figure out how to do it. Help pliz :)

JSfiddle demo: http://jsfiddle.net/a5py9z9v/

jQuery(document).ready(function($) { //SPOILERS var icon = $('.spoiler_links'); icon.find('span').text('+'); $('.spoiler_links').click(function() { $(this).parent().children('div.spoiler_body').toggle('fast'); var icon = $('.spoiler_links'); icon.find('span').text('-'); return false; }); });

 .spoiler_body { display:none; } .spoiler_links { cursor:pointer; color:#5f6a70; text-decoration:none; display:block; font-size:1em; } .spoiler_body { font-size:0.9em; } .spoilerblock { padding:1% 0; border-bottom:1px solid #dddede; } .icon { font-size:1.8em; font-weight:bold; color:#51758c; display:inline-block; float:right; position:relative; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="spoilers"> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler1 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler2 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler3 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> </div> </body> </html>

Accepted Answer · 2015-07-03T12:09:38

Demo 1: http://jsfiddle.net/7qe0tj2u/

 var icon = $('.spoiler_links'); icon.find('span').text('+'); $('.spoiler_links').click(function() { //сначала закроем все другие спойлеры var $other_spoilers = $('a.spoiler_links').not(this); $other_spoilers.siblings().hide('fast'); //и заодно вернем им плюсики $other_spoilers.find('span').text('+'); // теперь собственно откроем кликнутый спойлер // кстати, сын моего отца - мой брат ;) по-английски - сиблинг // $(this).parent().children('div.spoiler_body').toggle('fast'); $(this).siblings().show('fast') // фикс для минусов // старый код выбирает ВСЕ спойлеры на странице, а нам нужен только кликнутый, правда? //var icon = $('.spoiler_links'); // icon.find('span').text('-'); $(this).find('span').text('-'); return false; });

 .spoiler_body { display: none; } .spoiler_links { cursor: pointer; color: #5f6a70; text-decoration: none; display: block; font-size: 1em; } .spoiler_body { font-size: 0.9em; } .spoilerblock { padding: 1% 0; border-bottom: 1px solid #dddede; } .icon { font-size: 1.8em; font-weight: bold; color: #51758c; display: inline-block; float: right; position: relative; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="spoilers"> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler1 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler2 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler3 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> </div>

The second version, where the open spoiler opens and closes:

 var icon = $('.spoiler_links'); icon.find('span').text('+'); $('.spoiler_links').click(function() { //сначала закроем все другие спойлеры var $other_spoilers = $('a.spoiler_links').not(this); $other_spoilers.siblings().hide('fast'); //и заодно вернем им плюсики $other_spoilers.find('span').text('+'); // раньше мы открывали кликнутый спойлер //$(this).siblings().show('fast') // а теперь мы его переключаем - toggle // но теперь нам придется-таки проверить, закрылся он или открылся // чтобы поставить ему "-" или "+" по окончании анимации $(this).siblings().toggle('fast', function() { var $icon = $(this).siblings('a.spoiler_links').find('span') if ($icon.text() == '+') { $icon.text('-') } else { $icon.text('+') } }) return false; });

 .spoiler_body { display: none; } .spoiler_links { cursor: pointer; color: #5f6a70; text-decoration: none; display: block; font-size: 1em; } .spoiler_body { font-size: 0.9em; } .spoilerblock { padding: 1% 0; border-bottom: 1px solid #dddede; } .icon { font-size: 1.8em; font-weight: bold; color: #51758c; display: inline-block; float: right; position: relative; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="spoilers"> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler1 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler2 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> <div class="spoilerblock"> <a href="" class="spoiler_links">Spoiler3 <span class="icon"></span></a> <div class="spoiler_body"> <p> content </p> </div> </div> </div>

http://jsfiddle.net/wrhqc34c/

Thank you very much for the help and PPC (human understandable comments)!
Can you tell me how to make it so that you can close the open spoiler?
in the original code it was not necessary to additionally register, now, apparently, it is necessary.

Spoiler with changing markers

1 answer 1

More articles: