Jquery Slide Down show div with loop

Question

У меня есть несколько сложных div с вложенными div, включая текст и изображения. Когда загружается страница, я показываю 4 из div. Ниже показана кнопка, чтобы показать больше. Каждый раз, когда пользователь нажимает кнопку «Показать больше», используя JQuery, чтобы сдвинуться вниз и показать следующие 2 div. В общей сложности 28 разделов, это будет 14 строк. После того, как все поля будут видны, кнопка изменится на «показывать меньше», а остальные части будут скользить или скрываться (havnt добрался до этой части)

по какой-то причине JsFiddle не работает нормально: (, им не лучший в JavaScript. Ниже приведен код и Jsfiddle Link. Я сделал простые дивы в примере.

JsFiddle

Link To Js Fiddle

HTML

<div class="leaders"> 

    <div class="colum-left"> 

</div> 
<div class="colum-right"> 

</div> 
    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

</div> 
</div> 

<div class="leaders-hidden"> 

    <div class="colum-left"> 

    </div> 
<div class="colum-right"> 

</div> 

</div> 

<div class="leaders-hidden-2"> 

<div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

</div> 

</div> 

<div class="leaders-hidden-3"> 

<div class="colum-left"> 

</div> 
<div class="colum-right"> 

</div> 

</div> 


<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;" href="#">SEE MORE</a></span></center> 

JS

var count = 0; 

$(".leaders-hidden").addClass('hide'); 
$(".leaders-hidden-2").addClass('hide'); 
$(".leaders-hidden-3").addClass('hide'); 



$("#showmoreleaders").click(function() { 
count++; 
}); 

if (count == 1) { 
$(".leaders-hidden").slideDown("slow", function() { 
    // Animation complete. 
    }); 
} 


if (count == 2) { 
    $(".leaders-hidden-2").slideDown("slow", function() { 
    // Animation complete. 
    }); 
} 

if (count == 3) { 
    $(".leaders-hidden-3").slideDown("slow", function() { 
    // Animation complete. 
    }); 
} 

CSS

.read_btw { 
    border: 1px solid #017dc5; 
    margin-top: 10px; 
    padding: 15px; 
    display: inline-block; 
} 

.hide { 
display: none; 
} 

.colum-left { 
    float: left; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
    } 

.colum-right { 
    float: right; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
} 

JsFiddle

Link To Js Fiddle

Answer 1

здесь вы идете.

у вас был ваш if вне функции, поэтому поэтому он не работал, также обновлен, чтобы вы могли скрыть их после того, как все они показаны.

также я удалил href из тега, потому что он заставлял страницу идти вверх. если у вас нет ссылки, чтобы пойти, вы не должны положить hrefs в тегах

HTML

<div class="leaders"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 
    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 
</div> 

<div class="leaders-hidden"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 

</div> 

<div class="leaders-hidden-2"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 

</div> 

<div class="leaders-hidden-3"> 

    <div class="colum-left"> 

    </div> 
    <div class="colum-right"> 

    </div> 

</div> 


<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center> 

CSS

.read_btw { 
    border: 1px solid #017dc5; 
    margin-top: 10px; 
    padding: 15px; 
    display: inline-block; 
} 

.colum-left { 
    float: left; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
} 

.colum-right { 
    float: right; 
    width: 48%; 
    border: 1px solid #d9dada; 
    margin: 0px; 
    border-radius: 6px; 
    margin-right: 7.5px; 
    margin-bottom: 20px; 
    height: 200px; 
} 

.hide{ 
    display: none; 
} 

#showmoreleaders{ 
    cursor: pointer; 
} 

JS

var count = 0; 

$("#showmoreleaders").click(function() { 

    count++; 

    if (count == 1) { 
     $(".leaders-hidden").slideDown("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 2) { 
     $(".leaders-hidden-2").slideDown("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 3) { 
     $(".leaders-hidden-3").slideDown("slow", function() { 
      // Animation complete. 
     }); 
     $('#showmoreleaders').html('SEE LESS'); 
    } 

    if (count == 4) { 
     $(".leaders-hidden-3").slideUp("slow", function() { 
      // Animation complete. 
     }); 
    } 


    if (count == 5) { 
     $(".leaders-hidden-2").slideUp("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 6) { 
     $(".leaders-hidden").slideUp("slow", function() { 
      // Animation complete. 
     }); 
    } 

    if (count == 7) { 
     $('#showmoreleaders').html('SEE MORE'); 
     count = 0; 
    } 
}); 

$(".leaders-hidden").addClass('hide'); 
$(".leaders-hidden-2").addClass('hide'); 
$(".leaders-hidden-3").addClass('hide');