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

Sergyk89

Постоялец
Заблокирован
Регистрация
19 Окт 2008
Сообщения
73
Реакции
1
  • Автор темы
  • Заблокирован
  • #1
Доброе время суток! кто знает как сделать на сайте вот что бы при нажатии на подробней текст именно вот так появлялось описание как на этом сайте!
_http://teplopolis.com.ua/auxpage_faq/


За ранее спасибо!
 
Может прямо так:
Код:
<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.
 
  • Автор темы
  • Заблокирован
  • #3
Может прямо так:
Код:
<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.

ого пасибо но можно чуть по подробней а то я не сильно шарю или пример типа как делать, если можно где посмотреть ?
 
Даже не знаю куда еще подробнее :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: для "спасиб" есть спецкнопка, за посты со спасибо обычно банят ;)
 
  • Автор темы
  • Заблокирован
  • #5
Даже не знаю куда еще подробнее :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: для "спасиб" есть спецкнопка, за посты со спасибо обычно банят ;)

насчет спасибо понял? а еще вопрос а оно будет плавно открываться как на том сайте?
 
  • Автор темы
  • Заблокирован
  • #7
немножко изменить!

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

заранее спасибо!
 
Закомментируй строку
Код:
$('.toggle').hide();$('a.toggleLink').html(showText);
 
вот тут и демо и рассказ как это реализовать со всеми файликами
 
  • Автор темы
  • Заблокирован
  • #10
Закомментируй строку
Код:
$('.toggle').hide();$('a.toggleLink').html(showText);
немного не понял вот в этом коде что на что поменять?
$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
 
Назад
Сверху