CODEWITHSUNDEEP
javascriptjqueryhtml
user80946
user80946

Reputation: 385

Adding Styles on first 5 elements after clicking button using Jquery

I have codes like this

<div class="main">
    <div class="button hide">1</div>
    <div class="button hide">2</div>
    <div class="button hide">3</div>
    <div class="button hide">4</div>
    <div class="button hide">5</div>
    <div class="button hide">6</div>
    <div class="button hide">7</div>
 ..........
</div>
<a href="#" class="input">ZZZ</a>

I want to add style display:block to first five buttons (1,2,3,4,5 in this case) after clicking ZZZ And again if i click button ZZZ i want to hide first 5 buttons and add style display:block to 6,7,8,9,10

I could think up to here but we know style applies to all elements . Is it possible to add it for only first five buttons ?

$(".input").click(function(){
    $(.button).css("display","block");
});

Thanks :)

Upvotes: 2

Views: 585

Answers (3)

Cem Yıldız
Cem Yıldız

Reputation: 142

jQuery .show() and .hide() function already adding display:block and display:none to the element.

if you need some toggle between first 5 and others:

$('.input').on('click', function() {
    if($('.button:eq(0)').is(":visible")){
        $('.button:gt(4)').show();
        $('.button:lt(5)').hide();
    }else{
        $('.button:lt(5)').show();
        $('.button:gt(4)').hide();
    }
  return false;
});

Upvotes: 0

guradio
guradio

Reputation: 15555

FIDDLE

$(".input").click(function(){
    $('.main').find('.notblock').css("display","none");
});

html

<div class="main">
 <div class="button hide">1</div>
 <div class="button hide">2</div>
 <div class="button hide">3</div>
 <div class="button hide">4</div>
 <div class="button hide">5</div>
 <div class="button hide notblock">6</div>
 <div class="button hide notblock">7</div>
 ..........
</div>
<a href="#" class="input">ZZZ</a>

Add class to the div you want to be left out of selection and then use that class to select them to be left out. In this sample i added notblock to 6 and 7 div then using that class to select them to add a display none to them

UPDATE

FIDDLE

$(".input").click(function () {
    $('.main').find('.notblock').toggle();
    $('.main').find('.hide').toggle();
});

html

<div class="main">
    <div class="button hide">1</div>
    <div class="button hide">2</div>
    <div class="button hide">3</div>
    <div class="button hide">4</div>
    <div class="button hide">5</div>
    <div class="button notblock">6</div>
    <div class="button notblock">7</div>
    <div class="button notblock">8</div>
    <div class="button notblock">9</div>
    <div class="button notblock">10</div>..........</div>
<a href="#" class="input">ZZZ</a>

UPDATE

As per @Tushar suggestion to shorter the selector from $('.main').find('.notblock').toggle(); $('.main').find('.hide').toggle(); to $('.main').find('.notblock, .hide').toggle();

Upvotes: 0

Tushar
Tushar

Reputation: 87203

You can use :lt pseudo-selector to select first n elements.

Select all elements at an index less than index within the matched set.

$('.input').on('click', function() {
  $('.button:lt(5)').removeClass('hide');
  return false;
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main">
  <div class="button hide">1</div>
  <div class="button hide">2</div>
  <div class="button hide">3</div>
  <div class="button hide">4</div>
  <div class="button hide">5</div>
  <div class="button hide">6</div>
  <div class="button hide">7</div>
  ..........
</div>
<a href="#" class="input">ZZZ</a>

EDIT

To select elements after 5th index, you can use :gt pseudo-selector.

Select all elements at an index greater than index within the matched set.

$('.input').on('click', function() {
  $('.button:gt(4)').removeClass('hide');
  return false;
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main">
  <div class="button hide">1</div>
  <div class="button hide">2</div>
  <div class="button hide">3</div>
  <div class="button hide">4</div>
  <div class="button hide">5</div>
  <div class="button hide">6</div>
  <div class="button hide">7</div>
  ..........
</div>
<a href="#" class="input">ZZZ</a>

Upvotes: 5

Related Questions