Skip to content

Instantly share code, notes, and snippets.

@alixcan

alixcan/List-Grid.html

Created May 30, 2012 09:38
Show Gist options
  • Save alixcan/2835125 to your computer and use it in GitHub Desktop.
Save alixcan/2835125 to your computer and use it in GitHub Desktop.
Download ZIP
Grid - List HTML - CSS - jQuery
Raw
List-Grid.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#container ul { list-style: none; margin:0; padding:0;}
#container .buttons { margin-bottom: 20px; }
#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }
.acc{margin-top:3px; border:1px solid #ddd; display:block; padding:5px;}
.h{display:none;}
.v{display:block;}
</style>
<script type="text/javascript">
$(function(){
$('button').click(function(e) {
if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
$('ul li div').removeClass('h').addClass('v');
}
else if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
$('ul li div').removeClass('v').addClass('h');
}
});
});
</script>
</head>
<body>
<div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>
<ul class="grid">
<li>Item 1
<div class="h">
<span class="acc">içerik</span>
</div>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment