Коментарии раздвигать и сдвигать. - jQuery - Ответ 2487874

@jumper423 · Регистрация: 01.03.2011

Author24 — интернет-сервис помощи студентам

Доброго времени суток.
Появилось проблема.
Хочу сделать чтоб сначала отображалось часть заголовок и начало статьи, а после нажатия раскрывалось полностью статья и её комментарии. А по ещё одному нажатию статья обратно сдвигалась.
Статьи находятся одна под другой.

HTML5

<a href="#"><div class="contentGossip" id="0">
                    <div class="contentGossipText">
                        <div class="imgGossip"></div>
                        <div class="contentGossipTextT">
                            <h1>Заголовок</h1>
                            <p>Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.</p>
 
                            <div class="comments">
                                                 <p>Комментарий</p>
                                                 <p>Комментарий</p>
                                                 <p>Комментарий</p>
                                                 <p>Комментарий</p>
                            </div>
                        
                        </div>
                        <div class="contentGossipButton">
                            <div class="comments" id="contentId1">12</div>
                            <div class="commentsNew" id="contentNewId1">13</div>
                            <div class="top">21</div>
                        </div>
                        
                    </div>
                
                </div></a>
                <div class="contentBand"></div>
                
                <a href="#"><div class="contentGossip" id="1">
                    <div class="contentGossipText">
                        <div class="imgGossip"></div>
                        <div class="contentGossipTextT">
                            <h1>Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.Заголовок.</h1>
                            <p>Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.Текст.м</p>
                        </div>
                            <div class="comments">
                                                 <p>Комментарий</p>
                                                 <p>Комментарий</p>
                                                 <p>Комментарий</p>
                                                 <p>Комментарий</p>
                            </div>
                        <div class="contentGossipButton">
                            <div class="comments" id="contentId2">12</div>
                            <div class="commentsNew" id="contentNewId2">13</div>
                            <div class="top">21</div>
                        </div>
                        
                    </div>
                
                </div></a>

CSS

.contentGossip{
    width:996px;
    height:116px;
    background-image:url(../images/content/band.png);
    background-repeat:repeat-y;
}
 
.contentGossip:hover{
    background-image:url(../images/content/bandHover.png);
    background-repeat:repeat-y;
}
 
.contentBand{
    height:2px;
    background-image:url(../images/content/contentTextGradient.png);
    background-repeat:repeat-y;
}
 
.contentGossipText{
    margin-top:0px;
    position:relative;
    top:8px;
}
 
.imgGossip{
    height:100px;
    width:100px;
    background-image:url(../images/content/imgGossip.png);
    background-repeat:no-repeat;
    margin:0 35px 0 15px;
    float:left;
}
 
.contentGossipTextT{
    width:720px;
    float:left;
    overflow:hidden;
}
 
.contentGossipTextT h1{
    margin-left:50px;
    margin-bottom:5px;
    color:#39567A;
    font:18px Tahoma, Geneva, sans-serif;
    width:700px;
}
 
.contentGossipTextT p{
    color:#39567A;
    font:15px Tahoma, Geneva, sans-serif;
    width:720px;
}

Вернуться к обсуждению:
Коментарии раздвигать и сдвигать. jQuery

Следующий ответ

Другие темы раздела
jQuery Не работает функция в chrome при загрузке страницы https://www.cyberforum.ru/ javascript-jquery/ thread445801.html Собственно сабж. Сама функция написана на jQuery/ Вот код кусок кода страницы (хочу сказать, что в остальных браузерах все работает как мне надо): <html> <body onLoad="$(function(){ $('#form').hide(); });"> <script type="text/javascript"> $(function(){ $('#form').toogle('slow');	как написать свой собственный 3D Слайдер на Jquery jQuery Здраствуйте как можно создать свой собственный 3d Слайдер на JQuery я хочу научится их делать бо мне не подходят готовые я хочу что то свое придумать уникальное.
jQuery Поддерживает ли jquery border-radius? https://www.cyberforum.ru/ javascript-jquery/ thread445337.html у меня вопрос к знатокам jquery: Поддерживает ли jquery border-radius? Если да то почему if($id == '1'){ $("#pane_"+$id).addClass('act_pane').css({borderTopLeftRadius:0}) } else{ $("#pane_"+$id).addClass('act_pane'); } не работает этот код. Спасибо	jQuery Запрос - Возвращение результата и его исполнение JS Есть такой код JS: $(document).ready(function () { setInterval("Users();", 1000); }); function Users(){ $.post("ajax.php",{act: "n"},eval(result)); } ajax.php содержит: https://www.cyberforum.ru/ javascript-jquery/ thread445248.html
Lightbox 2 - отступ сверху jQuery Приветствую. Подскажите, как можно увеличить отступ сверху до появляемого окна?	jQuery Редактор фотографий Приветствую. Подскажите, существует ли в природе какой нить компонент, что бы на страницу можно было загрузить фотку, выделить в ней определенную область, добавить какой нить эффект и сохранить? https://www.cyberforum.ru/ javascript-jquery/ thread444746.html
jQuery можно ли в в 1 tab в разные вкладки загружать обьекты с одинаковыми id ? можно ли в в 1 ui.tabs в разные вкладки загружать обьекты с одинаковыми id ? https://www.cyberforum.ru/ javascript-jquery/ thread444630.html	как отправить значение после создание новой вкладки ? jQuery Всем привет! такой вопрос ui.tabs я cоздаю новую в кладку динамически $("#Tabs").tabs("add",url,index); а он оправляет данные старые ; пример var class = { data : { id : 0; }
jQuery как добавить карту от Яндекс на сайт https://www.cyberforum.ru/ javascript-jquery/ thread444565.html перепробовал несколько вариантов.. <script src="http://api-maps.yandex.ru/1.1/index.xml?key=AHp1Nk8BAAAAMsiNIQMA79fAKWMGaV40PL9CjN7TBl8KPs4AAAAAAAAAAAARc_FlGAZygq68x7cc6W-rBgsakg==" type="text/javascript"></script> <script type="text/javascript"> YMaps.jQuery(function() { var map = new YMaps.Map(YMaps.jQuery("#YMapsID") ); map.setCenter(new...	jQuery аякс версус гугл https://www.cyberforum.ru/ javascript-jquery/ thread443891.html что прописывать в сайтмапе для гугла чтоб он проиндексировал вариации страницы , сайт полностью на аяксе ?
jQuery Как вытащить текст выбранного элемента списка? Как вытащить <option>этот текст</option>? $(this).text() вытаскивает все пункты в виде текста. $('#select').change(function() { $(this).val(); // вытаскивает текущий value. нужен текст выбранного элемента между тегами <option> });	jQuery Попытка сделать цитирование для форума на jQuery Добрый день, умные люди! Сидела, думала... так ничего и не придумала... Задача: сделать цитирование на форуме, причем такое, чтобы в цитату входило именно та часть текста, которую я выделяю мышью, причем было понятно, чью реплику я цитирую. Ну и вставлялось в textarea. Рыла-рыла, перерыла документацию по jq, но так и не нашла, как это можно реализовать.... может кто-то сталкивался с... https://www.cyberforum.ru/ javascript-jquery/ thread442890.html

	14.02.2012, 04:09