подскажите как создать такой эффект появления полного описания!

Sergyk89 · 11 Авг 2011

Доброе время суток! кто знает как сделать на сайте вот что бы при нажатии на подробней текст именно вот так появлялось описание как на этом сайте!
_http://teplopolis.com.ua/auxpage_faq/

За ранее спасибо!

gres_18 · 11 Авг 2011

Может прямо так:

Код:

<script type="text/javascript"><!--
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<img src="/img/cont_arrow1.png" mce_src="/img/cont_arrow1.png" />';
var hideText='<img src="/img/cont_arrow2.png" mce_src="/img/cont_arrow2.png" />';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" mce_href="#" class="toggleLink">'+showText+'</a>');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});
// --></script>

Описание помести в тег класса toggle, например:

HTML:

<div class="toggle">

и не забудь подключить jquery.

Sergyk89 · 11 Авг 2011

gres_18 написал(а):

Может прямо так:

Код:

<script type="text/javascript"><!--
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<img src="/img/cont_arrow1.png" mce_src="/img/cont_arrow1.png" />';
var hideText='<img src="/img/cont_arrow2.png" mce_src="/img/cont_arrow2.png" />';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" mce_href="#" class="toggleLink">'+showText+'</a>');
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
// --></script>

Описание помести в тег класса toggle, например:

HTML:

<div class="toggle">

и не забудь подключить jquery.

ого пасибо но можно чуть по подробней а то я не сильно шарю или пример типа как делать, если можно где посмотреть ?

gres_18 · 11 Авг 2011

Даже не знаю куда еще подробнее :tut:

Вот пример на котором проверял я:

HTML:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript"><!--
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<img src="/img/cont_arrow1.png" mce_src="/img/cont_arrow1.png" />';
var hideText='<img src="/img/cont_arrow2.png" mce_src="/img/cont_arrow2.png" />';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" mce_href="#" class="toggleLink">'+showText+'</a>');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});
// --></script>
</h1>
<div id="faq">
<p><strong>Как вы осуществляете доставку в другой город Украины?</strong></p>
<div class="toggle">Мы осуществляем доставки любым удобным перевозчиком, который работает в Вашем городе. Если в Вашем населенном пункте нет ни одной компании оказывающей услуги перевозки, возможна доставка в ближайший населенный пункт, в котором данные компании есть, с последующим самовывозом.
Предварительную стоимость доставки можете узнать у менеджера магазина.</div>
<p><strong>Каким образом можно оплатить заказ?</strong></p>
<div class="toggle">Оплатить выбранный Вами товар возможно несколькими способами:<br />
1.	Переводом денежных средств на кредитную карту.<br />
2.	Безналичным расчетом.<br />
3.	По прибытии товара в Ваш  город непосредственно в пункте выбранного перевозчика. При этом дополнительно к стоимости перевозки прибавляется 1-2% от стоимости товара.<br />
При оплате на кредитную карту или по безналичному расчету, отправка товара осуществляется по факту зачисления денежных средств.
</div>
<p><strong>Как быстро Вы сможете доставить заказ в мой город?</strong></p>
<div class="toggle">Отправку мы осуществляем в день поступления заказа (если заказ был оформлен до 12:00) и на следующий день (если после 12:00). Далее сроки прибытия зависят только от города получателя и от собственно самого перевозчика. Ориентировочную дату прибытия вместе с номером декларации Вам скажет менеджер магазина. Далее нужно будет периодически позванивать перевозчику, и  узнавать прибытие по указанной декларации.</div>
<p><strong>А кто платит за перевозку товара я или вы?</strong></p>
<div class="toggle">Если стоимость перевозки составляет до 200 грн – оплачивает клиент, если свыше 200 грн мы компенсируем разницу.</div>
<p><strong>А не будет ли цена при получении (если заказывать с оплатой по прибытии) выше цены оговоренной при заказе товара?</strong></p>
<div class="toggle">Все цены, которые были оговорены на момент заказа, будут точно такими же и на момент оплаты товара по прибытии, независимо от того произошло изменение цен после заказа или нет.</div>
<p><strong>Если я оплачу переводом на карточку, какие гарантии того, что я получу товар?</strong></p>
<div class="toggle">Для перевода денег на карточку мы присылаем клиенту счет – по эл. адресу или факсом и реквизиты банка. После перевода Вы прикрепляете банковский чек к нашему счету, что будет служить свидетельством оплаты. 
В наших интересах, ровно как и в Ваших, организовать отправку товара как можно быстрее по факту зачисления денег, обычно отправка происходит в этот же день или на следующий (в зависимости от времени зачисления).
</div>
</body>
</html>

В секции head нужно подключить jquery:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Затем идет список оформленный как:

HTML:

<p><strong> ___ВОПРОС____ </strong></p>

И ответы в формате:

HTML:

<div class="toggle">_____ОТВЕТ НА ВОПРОС______</div>

PS: для "спасиб" есть спецкнопка, за посты со спасибо обычно банят

Sergyk89 · 12 Авг 2011

gres_18 написал(а):

Даже не знаю куда еще подробнее :tut:

Вот пример на котором проверял я:

HTML:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript"><!--
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='<img src="/img/cont_arrow1.png" mce_src="/img/cont_arrow1.png" />';
var hideText='<img src="/img/cont_arrow2.png" mce_src="/img/cont_arrow2.png" />';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append('<a href="#" mce_href="#" class="toggleLink">'+showText+'</a>');
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
// --></script>
</h1>
<div id="faq">
<p><strong>Как вы осуществляете доставку в другой город Украины?</strong></p>
<div class="toggle">Мы осуществляем доставки любым удобным перевозчиком, который работает в Вашем городе. Если в Вашем населенном пункте нет ни одной компании оказывающей услуги перевозки, возможна доставка в ближайший населенный пункт, в котором данные компании есть, с последующим самовывозом.
Предварительную стоимость доставки можете узнать у менеджера магазина.</div>
<p><strong>Каким образом можно оплатить заказ?</strong></p>
<div class="toggle">Оплатить выбранный Вами товар возможно несколькими способами:<br />
1.	Переводом денежных средств на кредитную карту.<br />
2.	Безналичным расчетом.<br />
3.	По прибытии товара в Ваш  город непосредственно в пункте выбранного перевозчика. При этом дополнительно к стоимости перевозки прибавляется 1-2% от стоимости товара.<br />
При оплате на кредитную карту или по безналичному расчету, отправка товара осуществляется по факту зачисления денежных средств.
</div>
<p><strong>Как быстро Вы сможете доставить заказ в мой город?</strong></p>
<div class="toggle">Отправку мы осуществляем в день поступления заказа (если заказ был оформлен до 12:00) и на следующий день (если после 12:00). Далее сроки прибытия зависят только от города получателя и от собственно самого перевозчика. Ориентировочную дату прибытия вместе с номером декларации Вам скажет менеджер магазина. Далее нужно будет периодически позванивать перевозчику, и  узнавать прибытие по указанной декларации.</div>
<p><strong>А кто платит за перевозку товара я или вы?</strong></p>
<div class="toggle">Если стоимость перевозки составляет до 200 грн – оплачивает клиент, если свыше 200 грн мы компенсируем разницу.</div>
<p><strong>А не будет ли цена при получении (если заказывать с оплатой по прибытии) выше цены оговоренной при заказе товара?</strong></p>
<div class="toggle">Все цены, которые были оговорены на момент заказа, будут точно такими же и на момент оплаты товара по прибытии, независимо от того произошло изменение цен после заказа или нет.</div>
<p><strong>Если я оплачу переводом на карточку, какие гарантии того, что я получу товар?</strong></p>
<div class="toggle">Для перевода денег на карточку мы присылаем клиенту счет – по эл. адресу или факсом и реквизиты банка. После перевода Вы прикрепляете банковский чек к нашему счету, что будет служить свидетельством оплаты. 
В наших интересах, ровно как и в Ваших, организовать отправку товара как можно быстрее по факту зачисления денег, обычно отправка происходит в этот же день или на следующий (в зависимости от времени зачисления).
</div>
</body>
</html>

В секции head нужно подключить jquery:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Затем идет список оформленный как:

HTML:

<p><strong> ___ВОПРОС____ </strong></p>

И ответы в формате:

HTML:

<div class="toggle">_____ОТВЕТ НА ВОПРОС______</div>

PS: для "спасиб" есть спецкнопка, за посты со спасибо обычно банят

насчет спасибо понял? а еще вопрос а оно будет плавно открываться как на том сайте?

gres_18 · 12 Авг 2011

Sergyk89 написал(а):
а оно будет плавно открываться как на том сайте?

Весь код я взял с приведенного в первом посте сайта - работать будет один-в-один

Успехов!

Sergyk89 · 18 Авг 2011

немножко изменить!

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

заранее спасибо!

gres_18 · 18 Авг 2011

Закомментируй строку

Код:

$('.toggle').hide();$('a.toggleLink').html(showText);

muris · 19 Авг 2011

вот тут и демо и рассказ как это реализовать со всеми файликами

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Sergyk89 · 19 Авг 2011

gres_18 написал(а):
Закомментируй строку

Код:

$('.toggle').hide();$('a.toggleLink').html(showText);

немного не понял вот в этом коде что на что поменять?
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

подскажите как создать такой эффект появления полного описания!

Sergyk89

Постоялец

gres_18

Pythonобандерівець®

Sergyk89

Постоялец

gres_18

Pythonобандерівець®

Sergyk89

Постоялец

gres_18

Pythonобандерівець®

Sergyk89

Постоялец

gres_18

Pythonобандерівець®

muris

Создатель

Sergyk89

Постоялец