show/hide list items in html

Question

I have list of several items, i need to show them less first and show more after button click.. I have achieved that by some code.. But the list items are in "display:list-item" i need them in "display: inline/inline-block"

 $(function() { $('span').click(function() { $('#datalist li:hidden').slice(0, 2).show(); if ($('#datalist li').length == $('#datalist li:visible').length) { $('span ').hide(); } }); }); 

 ul li:nth-child(n+3) { display: none; } ul li { border: 1px solid #aaa; } span { cursor: pointer; color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="datalist"> <li>dataset1</li> <li>dataset1</li> <li>dataset2</li> <li>dataset2</li> <li>dataset3</li> <li>dataset3</li> <li>dataset4</li> <li>dataset4</li> <li>dataset5</li> <li>dataset5</li> </ul> <span>readmore</span> 

Answer 1

Its just a matter of changing your code from:

$('#datalist li:hidden').slice(0, 2).show();

to

$('#datalist li:hidden').slice(0, 2).css('display','inline-block');

No need for extra classes. You can use classes if you want to add in CSS animations.

 $(function() { $('span').click(function() { $('#datalist li:hidden').slice(0, 2).css('display','inline-block'); if ($('#datalist li').length == $('#datalist li:visible').length) { $('span ').hide(); } }); }); 

 ul li:nth-child(n+3) { display: none; } ul li { border: 1px solid #aaa; display:inline-block; } span { cursor: pointer; color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="datalist"> <li>dataset1</li> <li>dataset1</li> <li>dataset2</li> <li>dataset2</li> <li>dataset3</li> <li>dataset3</li> <li>dataset4</li> <li>dataset4</li> <li>dataset5</li> <li>dataset5</li> </ul> <span>readmore</span> 

Answer 2

Instead of using jquery's .hide() and .show() , use .addClass() and .removeClass() with a class that will toggle "display:none". That way you will revert back to display:list-item and not block / inline-block :

 $(function() { $('span').click(function() { $('#datalist li:hidden').slice(0, 2).removeClass('displayNone'); if ($('#datalist li').length == $('#datalist li:visible').length) { $('span ').addClass('displayNone'); } }); }); 

 .displayNone { display: none; } ul li { border: 1px solid #aaa; } span { cursor: pointer; color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <ul id="datalist"> <li>dataset1</li> <li>dataset1</li> <li class="displayNone">dataset2</li> <li class="displayNone">dataset2</li> <li class="displayNone">dataset3</li> <li class="displayNone">dataset3</li> <li class="displayNone">dataset4</li> <li class="displayNone">dataset4</li> <li class="displayNone">dataset5</li> <li class="displayNone">dataset5</li> </ul> <span>readmore</span>