Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как выбрать элементы в пределах конкретного блока (https://javascript.ru/forum/jquery/60829-kak-vybrat-ehlementy-v-predelakh-konkretnogo-bloka.html)

Socpost 22.01.2016 14:01
Как выбрать элементы в пределах конкретного блока
 
Здравствуйте форумчане.
Имеется следующая разметка:
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a class="archive" href="#"></a>
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a class="archive" href="#"></a>
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a class="archive" href="#"></a>
  </td>
  </tr>
</table>

И код, для сворачивания-разворачивания списка элементов:
<script>
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть старые новости";
    shownews = "+ показать все новости";
	
	$(".stroka").each(function (i) {   // - нумерация идентификаторов строк
     $(this).prop("id", "news" + i);
});

    $(".archive").html( shownews );
    $(".news:not(:lt("+news+"))").hide();

    $(".archive").click(function (e){
      e.preventDefault();
      if( $(".news:eq("+news+")").is(":hidden") )
      {
        $(".news:hidden").show();
        $(".archive").html( hidenews );
      }
      else
      {
        $(".news:not(:lt("+news+"))").hide();
        $(".archive").html( shownews );
      }
    });
  </script>

Все работает, но проблема в том, что таких строк с дивами, у которых одинаковые классы - несколько, потому действие скрипта применяется ко всем строкам сразу.:(
Я добавил динамическую нумерацию идентификаторов ячеек td, но как теперь реализовать, чтобы сворачивались-разворачивались дивы именно своей ячейки - не знаю.. Возможно я вообще не там копаю. Короче, нуб просит помощи)

рони 22.01.2016 14:23
Открывашка 248 спойлер для новостей
 
Socpost,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть старые новости";
    shownews = "+ показать все новости";
  $(".stroka").each(function() {
    var b = $(".news", this).slice(news).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.toggle().is(":hidden");
        $(this).text([hidenews, shownews][a])
    }).text(shownews)
});
});
  </script>
</head>
<body>
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a class="archive" href="#"></a>
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a class="archive" href="#"></a>
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  <a class="archive" href="#"></a>
  </td>
  </tr>
</table>

</body>
</html>

Siend 22.01.2016 14:33
Добавлю, что можно избежать использование:
a.preventDefault();

достаточно удалить атрибут href из ссылок, ссылка примет вид:
<a class="archive">

Упадет также и все оформление - подчеркивание и синий, но вообщем-то не очень понятно зачем вообще использовать <a> если затем ему отрубать обработчик)

Socpost 22.01.2016 14:39
Спасибо большое! Помогли сильно сэкономить время!:)

Socpost 22.01.2016 15:39
Н-да.. Вылез очередной косяк: оказалось что две соседние ячейки должны тоже показывать-скрывать элементы синхронно с первой. Вот, собственно, разметка:
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
    </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
  
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
</table>

Т.е. при нажатии ссылки в td class="stroka2", должны прятаться или появляться дивы во всех 3х ячейках..:(

рони 22.01.2016 15:55
Цитата:
Сообщение от Socpost
Т.е. при нажатии ссылки в td class="stroka2", должны прятаться или появляться дивы во всех 3х ячейках..
либо я вас не понимаю, либо строка 11 $("tr").each

Socpost 22.01.2016 16:20
Цитата:
Сообщение от рони (Сообщение 404641)
либо я вас не понимаю, либо строка 11 $("tr").each
Спасибо за ответ. Работает, но не синхронно: в первой ячейке видно заданное кол-во дивов, как и положено, а 2-ю и 3-ю прячет начисто, а должно быть как в первой.
Я же правильно заменил:
$("tr").each(function() { ?

рони 22.01.2016 16:32
Socpost,
так?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть старые новости";
    shownews = "+ показать все новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.toggle().is(":hidden");
        $(this).text([hidenews, shownews][a])
    }).text(shownews)
});
});
  </script>
</head>
<body>
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
    </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>

  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
</table>


</body>
</html>

Socpost 22.01.2016 16:34
Цитата:
Сообщение от рони
так?
ИМЕННО! Спасибо Вам большое!:)

Socpost 25.01.2016 13:35
Подскажите, пожалуйста, почему при добавлении параметров в метод toggle (скорость анимации), текст ссылки изменяется только один раз?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0старые\u00A0новости";
    shownews = "+ показать\u00A0все\u00A0новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.toggle(1000).is(":hidden");
        $(this).text([hidenews, shownews][a])
    }).text(shownews)
});
});
  </script>
</head>
<body>
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
    </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
    </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>

  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
</table>


</body>
</html>

Siend 25.01.2016 14:02
a = +b.toggle(1000).is(":hidden");
"a" всегда у тебя возвращает 0,
поставь alert(a):
(пожамкай, убедись сам. А вот как решить - это к рони)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0старые\u00A0новости";
    shownews = "+ показать\u00A0все\u00A0новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.toggle(1000).is(":hidden");
        alert(a);
        $(this).text([hidenews, shownews][a])
    }).text(shownews)
});
});
  </script>
</head>
<body>
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
    </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
    </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
 
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
</table>
 
 
</body>
</html>

Siend 25.01.2016 14:04
Я бы предложил делать не hide, а через дополнительный класс скрывать, навесив на него нужные стили, и добавивь как раз css анимацию на появление и исчезновение.

Siend 25.01.2016 14:16
Хотя фигню ляпнул, держи раб. вариант. правда думаею его можно сделать и оптимальнее.
<script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0старые\u00A0новости";
    shownews = "+ показать\u00A0все\u00A0новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        b.toggle(1000);
        $(this).text($(this).text()==hidenews?shownews:hidenews)
    }).text(shownews)
});
});
  </script>





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0старые\u00A0новости";
    shownews = "+ показать\u00A0все\u00A0новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        b.toggle(1000);
        $(this).text($(this).text()==hidenews?shownews:hidenews)
    }).text(shownews)
});
});
  </script>
</head>
<body>
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
    </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
    </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
 
  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
</table>
 
 
</body>
</html>

Socpost 25.01.2016 14:17
Цитата:
Сообщение от Siend
a = +b.toggle(1000).is(":hidden");
"a" всегда у тебя возвращает 0,
поставь alert(a):
(пожамкай, убедись сам. А вот как решить - это к рони)
Да, действительно. Хм, а что принципиально поменялось при добавлении параметра?..

Socpost 25.01.2016 14:18
Цитата:
Сообщение от Siend (Сообщение 404941)
Хотя фигню ляпнул, держи раб. вариант. правда думаею его можно сделать и оптимальнее.
<script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0старые\u00A0новости";
    shownews = "+ показать\u00A0все\u00A0новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        b.toggle(1000);
        $(this).text($(this).text()==hidenews?shownews:hidenews)
    }).text(shownews)
});
});
  </script>
Спасибо, робит)))

рони 25.01.2016 16:15
:) 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
  $(function(){
    var news = 2; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0старые\u00A0новости";
    shownews = "+ показать\u00A0все\u00A0новости";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.is(":hidden");
        b.toggle(1000);
        $(this).text([shownews,hidenews][a])
    }).text(shownews)
});
});
  </script>
</head>
<body>
<table>
<tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"><nobr></nobr></a>
    </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
    </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>

  </td>
  </tr>
  <tr>
<td class="stroka">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka1">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
  </td>
  <td class="stroka2">
  <div class="news">Первая новость</div>
  <div class="news">Вторая новость</div>
  <div class="news">Третья новость</div>
  <div class="news">Четвертая новость</div>
<a class="archive" href="#"></a>
    </td>
  </tr>
</table>


</body>
</html>

Socpost 28.01.2016 19:32
Подскажите, пожалуйста, почему при сворачивании блока происходит непонятное изменение ширины ячейки и дерганье в сторону? Будто в ячейке появляется и исчезает еще один блок. Конфликт стилей? 
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
    <link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
 
	</style>
</head>
<body>
<script>
  $(function(){
    var news = 1; // - количество отображаемых новостей
    hidenews = "- скрыть старые новости";
    shownews = "+ показать все новости";
  $(".stroka").each(function() {
    var b = $(".news", this).slice(news).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        b.toggle(1000);
        $(this).text($(this).text()==hidenews?shownews:hidenews)
    }).text(shownews)
});

});
  </script>

<div class="tab_content">

<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>


<tr style="font-size: 15.5px;">
<td data-th="Name" style=""><img width="40" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Название оффера</td>
<td data-th="ECP">0</td>
<td data-th="CR">0</td>
<td data-th="Условия"><nobr>Подтвержденная заявка</nobr></td>
<!-- *** -->
<td class="stroka" data-th="Выплата">


 <div class="news">
 <div class="summa">
<nobr>450-500 руб.</nobr>
</div>
<div class="flagi"><nobr>
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
</nobr></div>
<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</div>
<div class="news">
<div class="summa">
<nobr>450-500 руб.</nobr>
</div>
<div class="flagi"><nobr>
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
<img style="margin-top: 5px" src="http://justcpa.biz/app/img/Belarus.png" width="24px" />
</nobr></div>

</div>

</td>
<!-- *** -->



</table>
</div>
</div>
</body>
</html>

рони 28.01.2016 19:48
Socpost,
замените toggle на slideToggle

Socpost 28.01.2016 19:52
Цитата:
Сообщение от рони
замените toggle на slideToggle
Спасибо Вам большое!

Socpost 01.02.2016 14:39
Прошу помочь разобраться еще в одном вопросе: При нажатии кнопки, сначала резко увеличивается высота блока, а потом уже проходит плавная анимация. Т. е. получается как-то не логично: ссылка просто падает вниз, освобождая место выезжающему контенту, вместо того, чтобы плавно опускаться вместе с ним((
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
    <link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
 .flagi{
 width: 220px;
 text-align: center;
 }
 .summa{
 text-align: center;
 }
 .moregeo{
font-size: 13px;
line-height: 15px;
 }
 .data{
 vertical-align: middle;
 }
 .archive{
text-decoration: none;
color: #718faa;	 
 }
 .imgview{
width:60px;
vertical-align: middle;
}
.news{
display: inline-block;
}
	</style>
</head>
<body>
 <script>
  $(function(){
    var news = 6; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0все\u00A0гео";
    shownews = "+ показать\u00A0все\u00A0гео";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.is(":hidden");
        b.slideToggle(1000);
        $(this).text([shownews,hidenews][a])
    }).text(shownews)
});
});
  </script>


<div class="tab_content">

<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>

<!-- Строка данных -->
<tr style="font-size: 15.5px;">
<td data-th="Name" class="data"><img class="imgview" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Мужские духи с феромонами Sexy Life</td>
<td data-th="ECP" class="data">0</td>
<td data-th="CR" class="data">0</td>
<td data-th="Условия" class="data"><nobr>Подтвержденная заявка</nobr></td>

<td class="stroka" data-th="Выплата">


 

<div class="flagi">
 <div class="summa">
<nobr>450-500 руб.</nobr>
</div>

<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/b/Belarus.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/u/Ukraine.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Russian_Federation.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/k/Kazakhstan.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/m/Moldova.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Romania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Lithuania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Latvia.png" />
</div>

</div>


<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</td>
</tr>
<!-- *** -->


</table>
</div>
</div>
</body>
</html>

рони 01.02.2016 14:45
Socpost,
что мешает сделать макет с запуском добавив run в тег HTML

Socpost 01.02.2016 14:58
А можно поподробнее? js, мягко говоря не мой конек:(

рони 01.02.2016 15:01
иSocpost,
[HTML  run] это не js это правило форматирования [/HTML]

Socpost 01.02.2016 15:03 
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
    <link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
 .flagi{
 width: 220px;
 text-align: center;
 }
 .summa{
 text-align: center;
 }
 .moregeo{
font-size: 13px;
line-height: 15px;
 }
 .data{
 vertical-align: middle;
 }
 .archive{
text-decoration: none;
color: #718faa;	 
 }
 .imgview{
width:60px;
vertical-align: middle;
}
.news{
display: inline-block;
}
	</style>
</head>
<body>
 <script>
  $(function(){
    var news = 6; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0все\u00A0гео";
    shownews = "+ показать\u00A0все\u00A0гео";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.is(":hidden");
        b.slideToggle(1000);
        $(this).text([shownews,hidenews][a])
    }).text(shownews)
});
});
  </script>


<div class="tab_content">

<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>

<!-- Строка данных -->
<tr style="font-size: 15.5px;">
<td data-th="Name" class="data"><img class="imgview" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Мужские духи с феромонами Sexy Life</td>
<td data-th="ECP" class="data">0</td>
<td data-th="CR" class="data">0</td>
<td data-th="Условия" class="data"><nobr>Подтвержденная заявка</nobr></td>

<td class="stroka" data-th="Выплата">


 

<div class="flagi">
 <div class="summa">
<nobr>450-500 руб.</nobr>
</div>

<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/b/Belarus.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/u/Ukraine.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Russian_Federation.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/k/Kazakhstan.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/m/Moldova.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Romania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Lithuania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Latvia.png" />
</div>

</div>


<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</td>
</tr>
<!-- *** -->


</table>
</div>
</div>
</body>
</html>

Socpost 01.02.2016 15:04
Ясно. Простите, не был знаком с таким тэгом.

рони 01.02.2016 15:21
Socpost,
display: inline-block; здесь нужен мастер по css и html, я мало чем могу помочь

рони 01.02.2016 15:22
Socpost,
на всякий случай http://jqueryui.com/toggle/

Socpost 01.02.2016 15:27
Понятно, спасибо

Socpost 01.02.2016 16:47
А нельзя сделать так, чтобы лишние элементы помещались в отдельный div, а уже его тогда прятать?

рони 01.02.2016 16:56
Socpost,
можно

Socpost 01.02.2016 17:15
Не подскажете как такое реализовать в моем случае?

рони 01.02.2016 17:46
Socpost,
:-? 
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="robots" content="noindex, nofollow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" media="all" href="http://justcpa.biz/landingnew/style.css">
    <link href="http://justcpa.biz/app/assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
 .flagi{
 width: 220px;
 text-align: center;
 }
 .summa{
 text-align: center;
 }
 .moregeo{
font-size: 13px;
line-height: 15px;
 }
 .data{
 vertical-align: middle;
 }
 .archive{
text-decoration: none;
color: #718faa;
 }
 .imgview{
width:60px;
vertical-align: middle;
}
.news{
display: inline-block;
}
	</style>
</head>
<body>
 <script>
  $(function(){
    var news = 6; // - количество отображаемых новостей
    hidenews = "- скрыть\u00A0все\u00A0гео";
    shownews = "+ показать\u00A0все\u00A0гео";
    news++;
  $("tr").each(function(c) {
    var b = $(".news:nth-child(n+"+news+")", this).wrapAll("<p>").parent().hide();
    $(".archive", this).click(function(a) {
        a.preventDefault();
        a = +b.is(":hidden");
        b.slideToggle("1000");
        $(this).text([shownews,hidenews][a])
    }).text(shownews)
});
});
  </script>


<div class="tab_content">

<div class="tabs_item">
<table class="rwd-table">
<tr class="info">
<th class="first">Оффер</th>
<th>EPС</th>
<th>CR</th>
<th>Условия</th>
<th id="vyplata" class="last">Выплата</th>
</tr>

<!-- Строка данных -->
<tr style="font-size: 15.5px;">
<td data-th="Name" class="data"><img class="imgview" src="http://justcpa.biz/offers/1452133904_245.png" alt="{{ offer.title }}">Мужские духи с феромонами Sexy Life</td>
<td data-th="ECP" class="data">0</td>
<td data-th="CR" class="data">0</td>
<td data-th="Условия" class="data"><nobr>Подтвержденная заявка</nobr></td>

<td class="stroka" data-th="Выплата">




<div class="flagi">
 <div class="summa">
<nobr>450-500 руб.</nobr>
</div>

<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/b/Belarus.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/u/Ukraine.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Russian_Federation.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/k/Kazakhstan.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/m/Moldova.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/r/Romania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Lithuania.png" />
</div>
<div class="news">
<img style="margin-top: 5px" src="http://justcpa.biz/flags/24/l/Latvia.png" />
</div>

</div>


<div class="moregeo">
<a class="archive" href="#"></a>
</div>
</td>
</tr>
<!-- *** -->


</table>
</div>
</div>
</body>
</html>

Socpost 01.02.2016 17:54
Спасибо Вам большое, за то что возитесь с нубами:)

hhh 03.02.2016 23:11
Цитата:
Сообщение от Socpost
Спасибо Вам большое, за то что возитесь с нубами
Код рони потрясающий! Я бы в три раза больше начиркал:)


Часовой пояс GMT +3, время: 12:06.