Несколько спойлеров в одну строку с показом содержимого на всю ширину

[Rootwar]

Первый код подошел, спасибо, большое!

[logispart]

Во-первых хотелось бы сказать Admin большое спасибо, исполняет каждую просьбу пользователей - Спасибо, такое редко встретишь.
И у меня тоже просьба, при строчном расположении блоков происходит следующие:
Заголовки спойлера располагаются на одном уровне, но при раскрытии спойлера заголовки спойлера спускаются до уровня содержимого спойлера. Как сделать, чтобы заголовки спойлера всегда оставались на своем месте?

Код:

<style type="text/css">
.blok {
    display: inline-block;
}
</style>

Код:

<div class="blok">
<a href="" class="spoiler_links">Спойлер №1</a>
<div class="spoiler_body">
Здесь ваш скрытый текст
</div>
</div>


<div class="blok">
<a href="" class="spoiler_links">Спойлер №1</a>
<div class="spoiler_body">
Здесь ваш скрытый текст
</div>
</div>

<div class="blok">
<a href="" class="spoiler_links">Спойлер №1</a>
<div class="spoiler_body">
Здесь ваш скрытый текст
</div>
</div>

[Admin]

Выровняйте их по верхнему краю родительского блока...

Просто добавьте в CSS классу blok следующее: vertical-align: top;

[logispart]

(24.07.2015 19:35:11)Admin писал(а):  Выровняйте их по верхнему краю родительского блока...

Просто добавьте в CSS классу blok следующее: vertical-align: top;

Вот спасибо, все оказалось гораздо проще, чем я думал.

[Gun-gel]

Здравствуйте, подскажите пожалуйста как к этому скрипту сделать чтобы по нажатию на спойлер он оставался активным? Я нашел код в комментариях для другого спойлера - Собственный спойлер с плавным открытием

Код:

$(document).ready(function(){ $(window.location.hash).show();
$('.spoiler_links').click(function(){
$('.spoiler_links').removeClass('bg_color');
if ($(this).next('.spoiler_body').css("display")=="none") {
$('.spoiler_body').hide('normal');
$(this).addClass('bg_color').next('.spoiler_body').toggle('normal');
}
else $('.spoiler_body').hide('normal');
return false;
});
});

Но никак не получается его применить для этого спойлер где спойлеры в одну строку идут. Пробовал классы менять ".spoiler_body" на .spoiler_text но он не хочет работать. Подскажите что я делаю не так?

[Admin]

Что значит "оставался активным"?

Или Вы имеете ввиду что к спойлеру, по которому кликнули последним должен примениться особый стиль?

JS код, который Вы привели, взят из комментария №1964 к теме Обновленный скрипт спойлера с плавным открытием и скрытием содержимого.
А строчку $(window.location.hash).show(); Вы взяли из комментария №1998 к теме Собственный спойлер с плавным открытием и скрытием содержимого.

Данная строчка предназначалась для решения следующей задачи:

Цитата:... чтобы при переходе на этот самый id (якорь) с другой страницы (оглавления на том же сайте) спойлер, скрывающий под собой статью с этим id (и только он), открывался автоматом без клика, т.е. страничка выходила бы с 9-ю статьями под спойлерами и с одной открытой.

Если Вам все же нужно, например, выделять открытый последним спойлер, то добавьте на страничку CSS стиль .bg_color с нужным оформлением. Из JS кода удалите $(window.location.hash).show();.

В результате должно получиться примерно следующее:

Код:

<style type="text/css">
.spoiler_body { display:none; overflow:hidden; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:underline; }
.blok { vertical-align:top; display:inline-block; }
.bg_color { background-color:#F0F0F0; }
</style>

<div class="blok">
<a href="" class="spoiler_links">Спойлер №1</a>
<div class="spoiler_body">
Здесь ваш скрытый текст
</div>
</div>


<div class="blok">
<a href="" class="spoiler_links">Спойлер №2</a>
<div class="spoiler_body">
Здесь ваш скрытый текст
</div>
</div>

<div class="blok">
<a href="" class="spoiler_links">Спойлер №3</a>
<div class="spoiler_body">
Здесь ваш скрытый текст
</div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$('.spoiler_links').removeClass('bg_color');
if ($(this).next('.spoiler_body').css("display")=="none") {
$('.spoiler_body').hide('normal');
$(this).addClass('bg_color').next('.spoiler_body').toggle('normal');
}
else $('.spoiler_body').hide('normal');
return false;
});
});
</script>

И на будущее желательно приводить полный код (JS, CSS и HTML) с как можно более подробным описанием, что нужно изменить или добавить.

[Феня]

Огромное спасибо admin за код спойлера в одну строку. Искал уже пару месяцев что похожее, и нашел единственный Ваш вариант в сети))

Однако хотелось бы еще пару фишек к Вашему коду (ваш первый пост):
1) Эффект слайдера между спойлерами (как в галереях, смена содержимого) [боковые стрелочки].
2) Функция закрытия спойлера по крестику (как в модальных окнах; в правом или левом верхнем углу).
3) И еще я заметил, что спойлеры открываются, и содержимое меняется, но они не закрываются, если нажимать на "Спойлер №X".

С Уважением ваш читатель

[Admin]

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

[Феня]

ну он не особо поменялся добавил ток в таблицу сами спойлеры и поменял эффекты появления/скрытия содержимого.

Код:

<link rel="stylesheet" href="http://tm-dwarfs.clan.su/info/html_css/akkaunty.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('.spoiler_text').toggle(false);
  $(this).parent().children('.spoiler_text').html( $(this).next().html() ).fadeIn(900);;
  return false;
});

$('.spoiler_links, .spoiler_text').parent().mouseleave(function(){
    $(this).children('.spoiler_text').fadeOut(900);
});
});
</script>


<style type="text/css">
.spoiler_body, .spoiler_text {display:none;}
.spoiler_links {cursor:pointer;}
</style>

<table align="center" class="st_t1"><!--st_t1-->
<tbody align="center">

    <tr>
        <td>
        
            <div>
                <a href="" class="spoiler_links">Спойлер №1</a>
                <div class="spoiler_body">
                    <div class="header t_3">Содержимое спойлера №1</div>
                </div>

                <a href="" class="spoiler_links">Спойлер №2</a>
                <div class="spoiler_body">
                <div class="header t_3">Содержимое спойлера №2</div>
                </div>

                <a href="" class="spoiler_links">Спойлер №3</a>
                <div class="spoiler_body">
                <div class="header t_3">Содержимое спойлера №3</div>
                </div>

                <div class="spoiler_text"></div>
            </div>
        
        </td>
    </tr>
    
</tbody>
</table>

---

ой( немного не то скинул((

Код:

<link rel="stylesheet" href="http://tm-dwarfs.clan.su/info/html_css/akkaunty.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('.spoiler_text').toggle(false);
  $(this).parent().children('.spoiler_text').html( $(this).next().html() ).fadeIn(900);;
  return false;
});

$('.spoiler_links, .spoiler_text').parent().mouseleave(function(){
    $(this).children('.spoiler_text').fadeOut(900);
});
});
</script>


<style type="text/css">
.spoiler_body, .spoiler_text {display:none;}
.spoiler_links {cursor:pointer;}
</style>

<table align="center" class="st_t2"><!--st_t2-->
<tbody align="center">

    <tr>
        <td>
        
            <div>
                <a href="" class="spoiler_links">Спойлер №1</a>
                <div class="spoiler_body">
                    <div class="header t_1">Содержимое спойлера №1</div>
                </div>

                <a href="" class="spoiler_links">Спойлер №2</a>
                <div class="spoiler_body">
                <div class="header t_2">Содержимое спойлера №2</div>
                </div>

                <a href="" class="spoiler_links">Спойлер №3</a>
                <div class="spoiler_body">
                <div class="header t_3">Содержимое спойлера №3</div>
                </div>

                <div class="spoiler_text"></div>
            </div>
        
        </td>
    </tr>
    
</tbody>
</table>

[Admin]

Ну как бы слайдер и спойлер это совсем разные вещи и для разных целей. Тут совсем не ясно как их объединять.

Принципиальной разницы в приведенных Вами кодах не вижу. Вы лучше опишите как можно подробнее задачу в целом, может данный код Вам совсем и не подходит и будет проще делать новый.