1 Востаннє редагувалося kovin (12.05.2015 15:33:31)

Тема: Схований контент css

Доброго дня, прошу про допомогу... Якщо хтось знає, як створити  на головній сторінці кнопку "читати далі" і при нажаті на неї буде показуватись повний текст, а кнопка пропадає... Якщо хтось знає будьласка наведіть якись маленький приклад... Дякую щось подібне до цього сайту http://www.coelho.ru/# ... я вже пробув код як там, але щось не виходить((

2

Re: Схований контент css

Тримай

HTML

<div class="container">
<p>
    Пауло Коэльо родился в Рио-де-Жанейро, Бразилия, 24 августа 1947 года в семье инженера. Родители хотели, чтобы мальчик пошел по стопам отца, но уже в юности Пауло решает, что будет писателем. Нежелание подростка следовать родительской воле приводит к тому, что его отправляют в психиатрическую больницу, где он проходит лечение электрошоком. Пауло трижды сбегает оттуда, но окончательно покидает больницу только через три года.
</p>

            <div class="advanced" style="display: none;">
                <p>
     «Когда мне было восемнадцать лет, я верил, что мой мир и мир моих родителей могут дружно сосуществовать. Я прилагал все усилия, чтобы хорошо учиться, я работал каждый день после обеда, но ночью хотел жить своей мечтой. К сожалению, мои родители не разделяли мою веру в спокойное сосуществование двух таких диаметрально противоположных миров. Однажды ночью я пришел домой пьяный, и следующим утром меня грубо разбудили санитары…»
</p>
<p>
     Получив долгожданную свободу, Коэльо путешествует по Америке и Европе, присоединяется к движению хиппи и даже пробует наркотики. После возвращения в Бразилию, он начинает писать песни для многих знаменитых исполнителей, а позже объединяет силы с рок-звездой Раулем Сейшасом… Вместе они создают песни, которые революционизируют бразильскую рок-музыку; некоторые из них &ndash; хиты и сегодня.
</p>
<p>
     Но вскоре Коэльо обвиняют в антиправительственной деятельности, арестовывают и &nbsp;бросают в тюрьму, где подвергают пыткам. По собственным словам, его спасло тогда только упоминание о продолжительном пребывании в психиатрической больнице. Выйдя из тюрьмы, Коэльо продолжает преследовать единственную цель, которую он поставил перед собой, еще будучи подростком: «Стать известным писателем, которого читают и уважают во всем мире».
</p>
<p>
     В 1982 году во время поездки в Европу Коэльо встречает таинственного человека, которого он называет «Джей» (J). Тот становится его духовным наставником и убеждает пройти путем Сантьяго, дорогой средневекового паломника к могиле апостола Иакова в городе Сантьяго-де-Компостела.
</p>
<p>
     Коэльо совершает это паломничество в 1986 году. Именно во время него он обращается к христианству и обретает веру. Он описывает этот опыт в своей первой книге «Дневник мага». Когда выходит его вторая книга «Алхимик», писатель получает не только мировую известность, но и статус современного классика.
</p>
<p>
     Сегодня Пауло Коэльо &ndash; один из самых любимых и читаемых писателей в мире. За свое творчество он получил множество различных наград, в том числе орден Почетного легиона. В 2002 году он стал членом Бразильской литературной академии, а в 2007 году &ndash; Послом мира ООН. Его книги переведены на 80 языков, а их общий тираж превысил 150 миллионов экземпляров. Пауло Коэльо вошел в Книгу рекордов Гиннеса как автор самого переводимого в мире романа («Алхимик»).
</p>
<p>
     В 1996 вместе с женой Кристиной он основал Институт Пауло Коэльо, который помогает малоимущим детям и пожилым людям в Бразилии. С 2013 года писатель является членом Руководящего совета организации Amnesty International.
</p>
<p>
     На досуге Коэльо любит читать, путешествовать, играть в футбол, гулять, часто общается со своими фанатами в Сети, ведет блог, занимается музыкой и кюдо (своего рода медитативная стрельба из лука).
</p>
<p>
     Пауло Коэльо много занимался философией, изучал магию, алхимию и религии всех форм и направлений, жадно читал, терял и вновь находил свою веру. Он отправился в свой духовный поиск, стремясь быть не таким, как все, и чувствовать себя другим; но он понял, что «экстраординарное, необычное находится на пути ординарных, обычных людей». Он говорит, что все мы несем в себе силу, необходимую, чтобы найти нашу собственную судьбу, совершать «Подвиг добрый» и воплотить в жизнь нашу «Личную легенду». Пауло, конечно же, реализует свою «Личную легенду», и история его жизни служит тому доказательством.
</p>                <p></p>
            </div>
            <div class="more">
                <a href="#">читать полностью</a>
            </div>
        </div>


CSS

.advanced {
    display: none;
    overflow: hidden;
}
#author .more {
    margin: 32px 0 0;
}
.more {
    text-align: right;
}
.more.opened a {
    background-position: 100% -50px;
}
.more a {
    background: url("../images/arrow01.png") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
    color: #7e7e7e;
    display: inline-block;
    line-height: 44px;
    padding: 0 60px 0 0;
    text-decoration: none;
    transition: all 0.3s ease 0s;
    vertical-align: top;
}

jQuery
v1.9.1

$(function(){
$('.more a').bind('click', function(e){
        e.preventDefault();
        var text1 = 'читать полностью',
            text2 = 'скрыть подробности',
            holder = $(this).parent();

        if(holder.hasClass('more-news')){
            text1 = 'другие новости';
            text2 = 'скрыть новости';
        }

        if(holder.hasClass('opened')){
            holder.siblings('.advanced').slideUp(500, function(){})
            holder.removeClass('opened');
            $(this).text(text1);
        }
        else{
            holder.siblings('.advanced').slideDown(500, function(){});
            holder.addClass('opened');
            $(this).text(text2);
        }
    })

})
Подякували: kovin1

3

Re: Схований контент css

- що ж це москалі в код залізли.

kovin написав:

Доброго дня, прошу про допомогу... Якщо хтось знає, як створити  на головній сторінці кнопку "читати далі" і при нажаті на неї буде показуватись повний текст, а кнопка пропадає... Якщо хтось знає будьласка наведіть якись маленький приклад... Дякую щось подібне до цього сайту http://www.coelho.ru/# ... я вже пробув код як там, але щось не виходить((

взагалі то кнопочку створити легко потрібно чуть посидіти з  jQuery http://api.jquery.com/hide/ там досить прикладів

Збираю знання і... роздаю знання :)
Подякували: kovin1

4

Re: Схований контент css

Анатолій написав:

- що ж це москалі в код залізли.

kovin написав:

Доброго дня, прошу про допомогу... Якщо хтось знає, як створити  на головній сторінці кнопку "читати далі" і при нажаті на неї буде показуватись повний текст, а кнопка пропадає... Якщо хтось знає будьласка наведіть якись маленький приклад... Дякую щось подібне до цього сайту http://www.coelho.ru/# ... я вже пробув код як там, але щось не виходить((

взагалі то кнопочку створити легко потрібно чуть посидіти з  jQuery http://api.jquery.com/hide/ там досить прикладів

краще toggle http://api.jquery.com/toggle/

ще можна погуглити accordion (js jquery)

Подякували: kovin1