CODEWITHSUNDEEP
javascriptjquery
Toby
Toby

Reputation: 717

"Show More" Link for buttons inside div (multiple show more buttons)

Here is the fiddle And this is my code here:

$(document).ready(function(){
  $( "button.playtrailer" ).eq(2).after('<a href="" id="particular">....Show More</a>');//add a unique id to link
  $( "button.playtrailer:gt(2)" ).addClass('hide');
});

$(document).on('click','a#particular',function(e){
  e.preventDefault();
  $(this).addClass('hide');
  $('button.playtrailer').removeClass('hide');
});
.hide 
{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>div1</p>
<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div2</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div3</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

What I want?

In this code, There is only 1 Show More Link for all buttons inside a div.

I want different show more buttons for each div, something like this:

div1

Trailer 1 Trailer 2 Trailer HD...Show more

div2

Trailer 1 Trailer 2 Trailer HD...Show more

div3

Trailer 1 Trailer 2 Trailer HD...Show more

I want to do this without changing the class (both in div and button). What changes should, I make in my Jquery code?

Upvotes: 1

Views: 584

Answers (4)

Rostyslav Kuzmovych
Rostyslav Kuzmovych

Reputation: 241

I think something like this would be acceptable

$(document).ready(function(){     
  $('div').each(function(){
    $(this).children().slice(2).addClass('hide');
  });
  $('div').append('<a href="">....Show More</a>');
});

$(document).on('click','a',function(e){
  e.preventDefault();
  $(this).parent().children().removeClass('hide');
  $(this).addClass('hide');
});
.hide 
{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>div1</p>
<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div2</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div3</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

What i changed : I add hide class to all buttons in each div exept first 2, and each a tag opens only his div's buttons

Also you wrote //add a unique id to link but each link is same as previous, so they are not unique

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Isolate instances inside the parent trailerdiv. Use the parent as the start point and use find() or children() to look only inside that parent instance.

Also need to change the #particular to a class since ID's must be unique

$(document).ready(function() {
  $('.trailerdiv').each(function() {
    // "this" is the instance of "trailerdiv"        
    var $btns = $(this).find("button.playtrailer");
    $btns.eq(2).after('<a href="" class="show-more">....Show More</a>'); //add a unique id to link
    $btns.filter(':gt(2)').addClass('hide');
  });
});

$(document).on('click', 'a.show-more', function(e) {
  e.preventDefault();
  // only remove hide class from this button instance's siblings
  $(this).addClass('hide').siblings().removeClass('hide');

});

DEMO

Upvotes: 0

Dij
Dij

Reputation: 9808

you can add show more after 3 links inside every .trailerdiv. Also when a show more link is clicked look for hidden buttons inside its parent and show them, instead of showing all hidden buttons.

$(document).ready(function(){
  $( ".trailerdiv" ).each(function(){
      $(this).children(".playtrailer").eq(2).after('<a href="" id="particular">....Show More</a>');//add a unique id to link
      $(this).children(".playtrailer:gt(2)" ).addClass('hide');
  });
});

$(document).on('click','a#particular',function(e){
  e.preventDefault();
  $(this).addClass('hide');
  $(this).parent().children('button.playtrailer').removeClass('hide');
});
.hide 
{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>div1</p>
<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div2</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div3</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

Upvotes: 2

Shiladitya
Shiladitya

Reputation: 12181

Here you go with the solution https://jsfiddle.net/mcvsbsdy/2/

$(document).ready(function(){
  
  $('.trailerdiv').each(function() {
  	$($(this).children()[2]).nextAll().addClass('hide');
  	$($(this).children()[2]).after('<a href="" id="particular">....Show More</a>');
  })
});

$(document).on('click','a#particular',function(e){
  e.preventDefault();
  $(this).addClass('hide');
  $(this).nextAll().removeClass('hide');
});
.hide 
{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>div1</p>
<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div2</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

<p>div3</p>

<div class="trailerdiv">
<button class="playtrailer">Trailer 1 </button>
<button class="playtrailer">Trailer 2 </button>
<button class="playtrailer">Trailer HD </button>
<button class="playtrailer">Trailer 5 </button>
<button class="playtrailer">Trailer 8 </button>
<button class="playtrailer">Video 3 </button>
</div>

Upvotes: 0

Related Questions