Одновременное открытие трёх блоков

[stanislavsss]

Здравствуйте Уважаемые мастера! Проблема такая - есть шаблон на Dle, в нём 3 блока: "Удобно", "Понятно", "Бесплатно", каждый из которых, при нажатии на кнопку отъезжает вниз раскрывая дополнительную информацию. Блоки расположены горизонтально на равном расстоянии друг от друга. Дело в том, что при нажатии на кнопку любого из этих трёх блоков раскрывшаяся информация двигает весь контент вниз, под двумя оставшимися нераскрытыми блоками остаётся пустое место. Идея в том, сделать так, чтобы при нажатии любой кнопки, любого из этих блоков все три блока открывались.

На одном из форумов мне предложили такое вот решение:
$(function(){
$('.button')нажмите(function(){
$('#блок 1, #block2, #block3').show('исчезать');
});
});

<div class="button">При нажатии все три блока откроются</div>

<div id="блок 1">Это первый блок</div>
<div id="block2">Это второй блок</div>
<div id="block3">Это третий блок</div>

Эксперементировал с js и main.tpl - ничего не получилось (не могу найти и правильно прописать название кнопки и блоков указанных в js).

К теме прилагаю ссылку на откорректированный от лишнего кода файл моего шаблона. Помогите кто знает в чем беда. Как и куда вставить этот код? Что туда прописать? Возможно просто код не рабочий?
Для просмотра ссылки Войди или Зарегистрируйся

 

[Горбушка]

Причём тут ДЛЕ? Тебе в JS...

$(function(){
$('.button')нажмите(function(){
$('#блок 1).show(1);
$('#блок 2).show(1);
$('#блок 3).show(1);
});
});

Грубо говоря так...

 

[IgorFIN]

Подключить библиотеку jQuery было бы неплохо

<script type="text/javascript" src="//yandex.st/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#button').on('click', function(){
      $('#block1, #block2, #block3).show();
   });
});
</script>

 

[stanislavsss]

Это всё хорошо, я думаю и первый и второй вариант конечно работать будут, но вся проблема в том, что если я вставлю предложенные варианты в свой js всё-равно ничего работать не будет так, как я не смог разобраться с id блоков в моём шаблоне, а также с id кнопки открытия, тоесть я на данный момент не понял, что прописать вместо #block1, #block2, #block3, а также что прописать вместо #button'. Вот такие дела... А по поводу библиотеки jQuery, так она и так присутствует в файлах движка.

 

[dwarf]

не понял, что прописать вместо #block1, #block2, #block3, а также что прописать вместо #button'.

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

 

[stanislavsss]

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

Вот код отвечающий за эти блоки и кнопки (он такой мудрёный, я так и не понял что здесь отвечает за кнопку, ощущение, что часть кода отвечающего за открытие блока заимствована из другого блока расположенного в шаблоне справа, может поэтому у меня ничего не получается) :

<section id="top-b" class="grid-block"><div class="grid-box width33 grid-h"><div class="module mod-box ">
<div class="deepest">

<div class="badge badge-new"></div>
<h3 class="module-title">Удобно!</h3> <img class="size-auto" src="{THEME}/images/mod30000.jpg" width="276" height="168" alt="Demo" />
<ul class="menu menu-sidebar">
<li class="level1 item1 parent"><span class="level1 parent"><span>Sleep is one of the most important things.</span></span>
<ul class="level2">
<li class="level2"><span>Продолжение...</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-box width33 grid-h"><div class="module mod-box ">
<div class="deepest">

<div class="badge badge-top"></div>
<h3 class="module-title">Понятно!</h3> <img class="size-auto" src="{THEME}/images/mod20000.jpg" width="276" height="168" alt="Demo" />
<ul class="menu menu-sidebar">
<li class="level1 item1 parent"><span class="level1 parent"><span>Get some inspiration from one of quick.</span></span>
<ul class="level2">
<li class="level2"><span>Продолжение...</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-box width33 grid-h"><div class="module mod-box ">
<div class="deepest">

<div class="badge badge-hot"></div>
<h3 class="module-title">Бесплатно!</h3> <img class="size-auto" src="{THEME}/images/mod10000.jpg" width="276" height="168" alt="Demo" />
<ul class="menu menu-sidebar">
<li class="level1 item1 parent"><span class="level1 parent"><span>Stay well and track your daily fitness.</span></span>
<ul class="level2">
<li class="level2"><span>Продолжение...</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</section>

 

[dwarf]

клик по каким элементам из листинга вызывает "раскрытие" блока?

 

[stanislavsss]

Для просмотра ссылки Войди или Зарегистрируйся, Вот на скрине красным обвёл... (изображение: 7YjBb4Cr.png)

 

[Vishez]

Для просмотра ссылки Войди или Зарегистрируйся, Вот на скрине красным обвёл... (изображение: 7YjBb4Cr.png)

Не можешь узнать id элементов? А не пробовал в браузере щелкнуть правой кнопкой мыши по элементу и в инспекторе html посмотреть что да как. Для Firefox скачай Firebug - весьма удобная штука имхо. Ну или дай ссылку на сайт мы за тебя посмотрим, ибо разбираться вот так в коде неочень удобно.

 

[stanislavsss]

Не можешь узнать id элементов? А не пробовал в браузере щелкнуть правой кнопкой мыши по элементу и в инспекторе html посмотреть что да как. Для Firefox скачай Firebug - весьма удобная штука имхо. Ну или дай ссылку на сайт мы за тебя посмотрим, ибо разбираться вот так в коде неочень удобно.

Извините конечно милый человек! Имхо... Неможешь узнать id элементов... Да, конечно, не могу, прочитайте пожалуйста ветку и Вы может, возможно поймёте в чем у меня трабла и что да как, извините конечно, но если Вы сами не читаете тему и не вникли в неё, то зачем Вы пишите здесь вообще, сайт на денвере, был бы сайт - дал бы ссылку. Если Вы так много знаете, имхо, подскажите действенный вариант решения вопроса, что да куда вставить? Код выложен, id, как я понял для Вас найти как два пальца об асфальт, зачем тогда писать бесполезные посты???