display block jequery code example

Example 1: display none in jquery

// The correct way to do this is to use show and hide:
<div id="check"> 
  <h3> Hello we check hide / show by jquery </h3>
</div>

//Syntex
$('#yourid').hide();
$('#yourid').show();

// Example 
$('#check').hide();
$('#check').show();

// Alternate way is to use the jQuery by css method:

//Syntex
$("#yourid").css("display", "none");
$("#yourid").css("display", "block");

//Example
$("#clear").css("display", "none");
$("#clear").css("display", "block");

Example 2: show more implementation jquery

var $li = $('ul li');
var $shPets = $('.shPets');

$shPets.each(function() {
  var petType = $(this).data('pet');
  $('ul li[data-pet=' + petType + ']')
    .not('.shPets') //not shPets
    .not(':first') //everything except first
    .hide();
});

$('.shPets').click(function() {
  var petType = $(this).data('pet');
  if ($(this).text() == 'Show More..') {
    $(this).text('Hide');
    $('ul li[data-pet=' + petType + ']').show();
  } else {
    $(this).text('Show More..');
    $('ul li[data-pet=' + petType + ']')
      .not('.shPets') //not shPets
      .not(':first') //everything except first
      .hide();
  }
});