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

Тема в разделе "Веб-дизайн", создана пользователем Sergyk89, 12 авг 2011.

Модераторы: zek24
  1. Sergyk89

    Sergyk89 Постоялец

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


    За ранее спасибо!
     
  2. gres_18

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

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Может прямо так:
    Код:
    <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. Sergyk89

    Sergyk89 Постоялец

    Заблокирован
    Регистр.:
    19 окт 2008
    Сообщения:
    73
    Симпатии:
    1
    ого пасибо но можно чуть по подробней а то я не сильно шарю или пример типа как делать, если можно где посмотреть ?
     
  4. gres_18

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

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Даже не знаю куда еще подробнее :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: для "спасиб" есть спецкнопка, за посты со спасибо обычно банят ;)
     
    designf, nigga22480 и Sergyk89 нравится это.
  5. Sergyk89

    Sergyk89 Постоялец

    Заблокирован
    Регистр.:
    19 окт 2008
    Сообщения:
    73
    Симпатии:
    1
    насчет спасибо понял? а еще вопрос а оно будет плавно открываться как на том сайте?
     
  6. gres_18

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

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Весь код я взял с приведенного в первом посте сайта - работать будет один-в-один ;) Успехов!
     
  7. Sergyk89

    Sergyk89 Постоялец

    Заблокирован
    Регистр.:
    19 окт 2008
    Сообщения:
    73
    Симпатии:
    1
    немножко изменить!

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

    заранее спасибо!
     
  8. gres_18

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

    Регистр.:
    26 апр 2009
    Сообщения:
    407
    Симпатии:
    206
    Закомментируй строку
    Код:
    $('.toggle').hide();$('a.toggleLink').html(showText);
     
  9. muris

    muris Создатель

    Регистр.:
    1 авг 2011
    Сообщения:
    10
    Симпатии:
    1
    вот тут и демо и рассказ как это реализовать со всеми файликами
    http://ruseller.com/lessons.php?rub=32&id=211
     
  10. Sergyk89

    Sergyk89 Постоялец

    Заблокирован
    Регистр.:
    19 окт 2008
    Сообщения:
    73
    Симпатии:
    1
    немного не понял вот в этом коде что на что поменять?
    $('.toggle').hide();$('a.toggleLink').html(showText);
    $(this).parent().next('.toggle').toggle('slow');