We Keep Coding

Multiple dropmenu buttons - Open only clicked button

I found good split dropmenu button script.
Created multiple buttons, and problem is if I click one button then all dropmenus of other buttons open...
So what I want to accomplish is only to open dropmenu that i've clicked not all menus (10post per page so i have 10buttons) that are on page.
Guess I need some id recognition code in my .js.
my script:
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!splitBtn.hasClass("open"))
splitBtn.addClass("open");
});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("html").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

jQuery $(this) is concerned about the element concerned in this function (Onclick). We use closest() to reach The parent container (.x-split-button) which is the targeted element in this case.
We can also use $(this).parent(".x-split-button").addClass("open");
In other situations, you could use $(this).parents(); when the container is not a direct parent.
$(function() {
var splitBtn = $(".x-split-button");
$("button.x-button-drop").on("click", function() {
if (!($(this).closest(".x-split-button").hasClass("open"))){
splitBtn.removeClass("open");
$(this).closest(".x-split-button").addClass("open");
}else{
$(this).closest(".x-split-button").removeClass("open");
}});
$(".x-split-button").click(function(event) {
event.stopPropagation();
});
$("body").on("click", function() {
if (splitBtn.hasClass("open"))
splitBtn.removeClass("open");
});
});
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
font-weight: 600;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
color: #000000;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #000000;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><font color="green">1st forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
<br/><br/><br/><br/><br/><font color="green">2nd forum post....text goes here....</font><br/>
<span class="x-split-button">
<button class="x-button x-button-main">Admin Options</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Edit
</li>
<li>
Delete
</li>
<li>
Move
</li>
</ul>
</span>
</center>

Jquery hide dropdown when mouse leave

I'm creating a navigation bar with dropdown as follows.
Can I make it so when my pointer leave the navbar menu and dropdown, the dropdown get hidden? I tried hover, mouseenter, and mouseleave but since I don't really understand the difference and I'm new in this I got stuck.
Any help appreciated. :)
$(".navbar-menu-each, .submenu-dropdown").hover(function() {
var menuChoice = $(this).val();
var menuPosition = $(this).find("a").position();
var dropdownPosition = menuPosition.left;
switch(menuChoice) {
case 0:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>New Employee Registration</li><li class='submenu-dropdown-each submenu-selected'>Employee List</li><li class='submenu-dropdown-each'>Employee Rehire</li><li class='submenu-dropdown-each'>Employee Without Bank Account</li><li class='submenu-dropdown-each'>Employee Without PPh 21</li>");
break;
case 1:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Memo Template</li><li class='submenu-dropdown-each'>Print Memo</li>");
break;
case 2:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Download & Upload</li><li class='submenu-dropdown-each'>Send Email</li>");
break;
case 3:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Approvals</li><li class='submenu-dropdown-each'>Employment Status Undo</li>");
break;
case 4:
$(".submenu-dropdown").html("<li class='submenu-dropdown-each'>Employee Data Report</li><li class='submenu-dropdown-each'>Headcount Report</li><li class='submenu-dropdown-each'>Employee Recapitulation Report</li>");
break;
}
var dropdownWidth = $(".submenu-dropdown").width();
var rightEdge = $(document).width();
if ((dropdownPosition + dropdownWidth) >= (rightEdge - 16)) {
var adjustRight = rightEdge - dropdownWidth - 16;
$(".submenu-dropdown").css({"left": adjustRight + "px"});
}
else {
if (dropdownPosition <= 16) {
$(".submenu-dropdown").css({"left": "16px"});
}
else {
$(".submenu-dropdown").css({"left": dropdownPosition + "px"});
}
}
$(".submenu-dropdown").show();
});
$(".navbar-menu-each").click(function() {
$(".navbar-menu-each").removeClass("menu-on");
$(this).addClass("menu-on");
});
.navbar {
display: block;
width: 100%;
position: relative;
margin-bottom: 240px;
}
.navbar-logo-wrapper {
position: absolute;
height: 60px;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
.navbar-logo-wrapper img {
width: 32px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-top {
width: 100%;
min-height: 60px;
box-shadow: 0px 1px 8px 0 rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 24px;
box-sizing: border-box;
}
.navbar-top-left {
}
.burger-btn-wrapper {
display: inline-block;
text-align: center;
margin: 0 16px 0 0;
}
.burger-btn-wrapper i {
font-size: 16px;
color: #333;
line-height: 60px;
transform: translateY(1px);
}
.module-name {
height: 60px;
line-height: 60px;
text-transform: uppercase;
display: inline-block;
font-size: 13px;
font-weight: 700;
color: #333;
}
.navbar-top-right {
}
.navbar-top-middle {
height: 60px;
text-align: center;
position: relative;
line-height: 0;
}
.modules-icon {
vertical-align: middle;
display: inline-block;
width: 60px;
text-align: center;
}
.modules-icon i {
font-size: 16px;
color: #333;
line-height: 60px;
}
.navbar-profile {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.navbar-profile img {
vertical-align: top;
}
.profpic-wrapper {
display: inline-block;
vertical-align: middle;
width: 60px;
height: 60px;
}
.navbar-profpic {
width: 40px;
height: 40px;
background-color: #00c983;
border-radius: 40px;
position: relative;
margin-left: 10px;
margin-top: 10px;
}
.profile-initial {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.profile-name {
display: inline-block;
vertical-align: middle;
font-size: 13px;
}
.profile-dropdown {
vertical-align: middle;
display: inline-block;
margin-left: 8px;
}
.navbar-wrapper {
display: inline-block;
width: 100%;
}
.navbar-top-middle img {
height: 32px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.navbar-menu {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.navbar-menu-list {
width: 750px;
list-style-type: none;
margin: 0;
padding: 15px 0;
cursor: pointer;
margin-left: 0;
}
.navbar-menu-each {
padding-left: 32px;
padding-right: 32px;
display: inline-block;
}
.navbar-menu-each:first-child {
padding-left: 24px;
}
.navbar-menu-each a {
color: #333;
font-size: 13px;
text-decoration: none;
}
.menu-on a {
font-weight: 700;
color: #00c983;
}
.navbar-page-name {
display: block;
font-size: 22px;
height: 60px;
line-height: 60px;
border-top: solid 0.5px #DEF5ED;
border-bottom: solid 0.5px #DEF5ED;
background-color: #F0FBF7;
color: #333;
padding-left: 24px;
}
.navbar-menu::-webkit-scrollbar {
height: 0;
}
.navbar-menu::-webkit-scrollbar-thumb {
background-color: transparent;
}
.submenu-dropdown {
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
position: absolute;
cursor: pointer;
top: 106px;
}
.submenu-dropdown-each {
display: block;
line-height: 48px;
font-size: 13px;
color: #333;
width: auto;
padding: 0 32px 0 24px;
}
.submenu-dropdown-each:hover {
background: #f8f8f8;
}
.submenu-selected {
font-weight: 700;
color: #00c983;
}
#media (max-width: 575px) {
.module-name {
display: none;
}
.profile-name {
display: none;
}
.modules-icon {
display: none;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="navbar">
<div class="navbar-logo-wrapper">
<img class="navbar-tree" src="https://cdn.frontify.com/api/screen/thumbnail/7UV_lfX5OBfHxFn5lc3ygK8UTU3z5pivwY9QDSDIOiFemj-DdmDzmwiPvbibaG63IMXz-MmGOs4aH-UqgoT9gw/350">
</div>
<div class="navbar-top">
<div class="navbar-top-left">
<div class="burger-btn-wrapper">
<i class="fas fa-bars"></i>
</div>
<div class="module-name">Employee</div>
</div>
<div class="navbar-top-right">
<div class="modules-icon"><i class="fas fa-th"></i></div>
<div class="navbar-profile">
<div class="profpic-wrapper">
<div class="navbar-profpic">
<div class="profile-initial">DJ</div>
</div>
</div>
<div class="profile-name">Dennis Jonathan</div>
<div class="profile-dropdown"><i class="fas fa-chevron-down"></i></div>
</div>
</div>
</div>
<div class="navbar-menu">
<ul class="navbar-menu-list">
<li class="navbar-menu-each menu-on" value=0>Employee Directory</li>
<li class="navbar-menu-each" value=1>Memo</li>
<li class="navbar-menu-each" value=2>Bulk Update</li>
<li class="navbar-menu-each" value=3>Approvals and Undo</li>
<li class="navbar-menu-each" value=4>Report</li>
</ul>
</div>
<div class="navbar-page-name">
Employee List
</div>
</div>
<ul class="submenu-dropdown">
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

It seems to me you are overcomplicating a simple process.
hover functionality can quite easily be replicated using only CSS.
.navbar-menu-list {
width: 750px;
list-style-type: none;
margin: 0;
padding: 15px 0;
cursor: pointer;
margin-left: 0;
}
.navbar-menu-each {
padding-left: 32px;
padding-right: 32px;
display: inline-block;
position:relative;
}
.navbar-menu-each a {
color: #333;
font-size: 13px;
text-decoration: none;
}
.navbar-menu-each:hover a {
font-weight: 700;
color: #00c983;
}
.navbar-page-name {
display: block;
font-size: 22px;
height: 60px;
line-height: 60px;
border-top: solid 0.5px #DEF5ED;
border-bottom: solid 0.5px #DEF5ED;
background-color: #F0FBF7;
color: #333;
padding-left: 24px;
}
.submenu-dropdown {
display: none;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
position: absolute;
cursor: pointer;
top: 20px;
left:0;
}
.navbar-menu-each:hover > .submenu-dropdown,
.submenu-dropdown:hover{
display: block;
}
.submenu-dropdown-each {
display: block;
line-height: 48px;
font-size: 13px;
color: #333;
width: auto;
padding: 0 32px 0 24px;
}
.submenu-dropdown-each:hover {
background: #f8f8f8;
}
.submenu-selected {
font-weight: 700;
color: #00c983;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="navbar-menu">
<ul class="navbar-menu-list">
<li class="navbar-menu-each">
Employee Directory
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>New Employee Registration</li>
<li class='submenu-dropdown-each submenu-selected'>Employee List</li>
<li class='submenu-dropdown-each'>Employee Rehire</li>
<li class='submenu-dropdown-each'>Employee Without Bank Account</li>
<li class='submenu-dropdown-each'>Employee Without PPh 21</li>
</ul>
</li>
<li class="navbar-menu-each">
Memo
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Memo Template</li>
<li class='submenu-dropdown-each'>Print Memo</li>
</ul>
</li>
<li class="navbar-menu-each">Bulk Update
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Download & Upload</li>
<li class='submenu-dropdown-each'>Send Email</li>
</ul>
</li>
<li class="navbar-menu-each">
Approvals and Undo
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Employee Data Approvals</li>
<li class='submenu-dropdown-each'>Employment Status Undo</li>
</ul>
</li>
<li class="navbar-menu-each">
Report
<ul class="submenu-dropdown">
<li class='submenu-dropdown-each'>Employee Data Report</li>
<li class='submenu-dropdown-each'>Headcount Report</li>
<li class='submenu-dropdown-each'>Employee Recapitulation Report</li>
</ul>
</li>
</ul>
</div>

How to write jQuery or JavaScript equivalent for CSS

I would like to have an jQuery equivalent to CSS which when tab is clicked shows it content. For now, I'm able to get this from CSS only. I would like to have same function with jQuery or Javascript.
For example, now when SUN is clicked, it shows "It is Sunday" and when MON is clicked, it shows "It is Monday" and so on.
How can I have same functionality from jQuery or Javascript?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>

Is that your suitable ? (see snippet)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
ul#daysList {
display: inline-block;
width: 100%;
list-style: none;
background: #fff;
padding: 1px 1px 0 1px;
font-family: Open Sans;
margin: 10px 0 0 0;
}
ul#daysList li {
position: relative;
box-sizing: border-box;
display: block;
float: left;
box-shadow: 0 0 15px #939393;
width: 70px;
height: 30px;
text-align: center;
line-height: 030px;
color: #ccc;
margin-bottom: -5px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
ul#daysList li:hover {
color: red;
cursor: pointer;
}
ul#daysList li.currentDay {
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
ul#daysList li.currentDay:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.content {
display: none;
border-top: 1px solid #bbb;
padding: 0 7px;
margin-top: 0;
background: #fff;
width: 100%;
height: 40px;
line-height: 38px;
box-shadow: 0 0 15px #939393;
}
.currentContent {
display: inline-block;
}
</style>
</head>
<body>
<ul id="daysList">
<li data-day="content1" class="currentDay">SUN</li>
<li data-day="content2">MON</li>
<li data-day="content3">TUE</li>
<li data-day="content4">WED</li>
<li data-day="content5">THU</li>
<li data-day="content6">FRI</li>
<li data-day="content7">SAT</li>
</ul>
<div id="content1" class="content currentContent">
<p> This is Sunday</p>
</div>
<div id="content2" class="content">
<p> This is Monday</p>
</div>
<div id="content3" class="content">
<p> This is Tuesday</p>
</div>
<div id="content4" class="content">
<p> This is Wednesday</p>
</div>
<div id="content5" class="content">
<p> This is Thursday</p>
</div>
<div id="content6" class="content">
<p> This is Friday</p>
</div>
<div id="content7" class="content">
<p> This is Saturday</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () { // Jquery ready. for complete page loaded
$("#daysList li").click(function () {
var
content_id = "#"+ $(this).data("day");
$("#daysList li").removeClass("currentDay");
$(this).addClass("currentDay");
$(".content").removeClass("currentContent");
$(content_id).addClass("currentContent");
});
}); // Jquery
</script>
</body>
</html>

jQuery delete class after click

I have viewer of objects with a switcher of list view and grid view. I also made if statement which says that when user choose grid view and in description is more than 35 characters user see only 35 characters, but when user back to list view I want it to comeback to full description. Can you have any solution for that?
$(document).ready(function() {
$("a.switcher").bind("click", function(event) {
event.preventDefault();
var mainId = $(this).attr("id");
var classNames = $(this).attr('class').split(' ');
var companyView = $("ul#company");
var linkList = $('span#link-list');
var gridDescription = $('span.description');
var listDescription = $('span.meta');
if (mainId == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
companyView.removeClass("list");
companyView.addClass("grid col-xs-12");
linkList.addClass("links-position");
gridDescription.addClass('.restrict');
var txt = $('.description').text();
if (txt.length > 35 && mainId == "gridview") {
$('.description').html(txt.substring(0, 35) + ' <a class="morelink" href="">[...]</a>');
}
$(".morelink").click(function(event) {
event.preventDefault();
$("#gridview").removeClass("active");
$("#listview").addClass("active");
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
});
} else if (mainId == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
}
});
});
* {
margin: 0;
padding: 0;
}
body {
color: #333;
padding-bottom: 25px;
}
img {
border: 0;
}
p {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 10px;
}
#wrap {
margin: 0 auto;
border-radius: 7px;
}
#wrap header {
border-bottom: 1px solid white;
margin-bottom: 35px;
padding-top: 20px;
position: relative;
}
#wrap header .list-style-buttons {
color: red;
position: absolute;
right: 0;
}
.switcher {
color: red;
}
.switcher:active {
color: #da1d15;
}
.switcher:visited {
color: #da1d15;
}
ul.list {
margin-bottom: 20px;
list-style: none;
width: 100%;
}
ul.list li {
margin-bottom: 20px;
display: block;
}
ul.list li section.left {
margin: 10px;
display: block;
float: left;
position: relative;
padding-left: 20px;
}
ul.list li .meta {
display: block;
}
ul.list li .links {
display: inline;
}
ul.list li .secondOffer {
margin-left: 20px;
}
ul.list li section.left img.thumb {
margin: 10px;
height: 150px;
width: 300px;
float: right;
}
ul.list li section.left h3 {
text-align: left;
font-weight: bold;
text-transform: uppercase;
font-size: 1.4em;
}
ul.list section.left {
padding: 20px;
}
ul.grid {
list-style: none;
margin: 0 auto;
}
ul.grid li section.left img.thumb {
height: 150px;
width: 300px;
position: relative;
}
ul.grid li {
display: block;
float: left;
width: 270px;
height: 150px;
padding: 5px 30px;
margin-bottom: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.grid li section.left {
padding: 10px;
}
ul.grid section.left {
position: relative;
height: 400px;
}
.links-position {
position: absolute;
bottom: 0;
}
ul.grid li.clearfix {
margin-bottom: 300px;
}
ul.grid li section.left h3 {
position: relative;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.5em;
}
ul.grid li .meta {
display: block;
}
ul.grid li .address {
position: relative;
}
ul.grid li .description {
position: absolute;
}
ul.grid li .links {
padding-left: 20px;
}
ul.grid .clearfix {
padding: 10px;
}
.clearfix {}
section.left {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
section.left:hover {
-webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
-moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
box-shadow: 0 0 15px rgba(207, 168, 168, 1);
}
a:link {
color: red;
text-decoration: none;
}
a.links:visited {
color: red;
text-decoration: none;
}
a.morelink {
text-decoration: none;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap" class="col-xs-12">
<header>
<span class="list-style-buttons">
<i class="fa fa-2x fa-th-list"></i>
<i class="fa fa-2x fa-th"></i>
</span>
</header>
<ul id="company" class="list clearfix">
<li class="clearfix alt">
<section class="left">
<img src="" alt="company image" class="thumb">
<a href="">
<h3>Name</h3>
</a>
<span class="meta address"><strong>Address: </strong></span>
<span class="meta description">
DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
</span>
<span id="link-list">
<a href="" class="links">
<i class="fa fa-id-card-o"></i>
Users:
</a>
<a href="" class="links secondOffer">
<i class="fa fa-database"></i>
Offers:
</a>
</span>
</section>
</li>
</ul>
</div>

You can store a lot of things inside jQuery's data storage (which is aligned with the HTML5 data attribute, but not directly connected).
$(document).ready(function () {
//`bind` is deprecated, use `on`:
$("a.switcher").on("click", function (event) {
event.preventDefault();
var mainId = $(this).attr("id");
var classNames = $(this).attr('class').split(' ');
var companyView = $("ul#company");
var linkList = $('span#link-list');
var gridDescription = $('span.description');
var listDescription = $('span.meta');
if (mainId == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
companyView.removeClass("list");
companyView.addClass("grid col-xs-12");
linkList.addClass("links-position");
gridDescription.addClass('.restrict');
//store local description:
var $description = $(".description");
$.each($description, function(i, e){
var $thisDesc = $(this);
var txt = $thisDesc.text();
$thisDesc.data("full-desc", txt);
if (txt.length > 35 && mainId == "gridview") {
$thisDesc.html(txt.substring(0, 35) + ' <a class="morelink" href="">[...]</a>');
}
});
//the .morelink a tag is being generated, you were trying to assign a listener *to that link*, but it doesn't exist yet, instead add a listener to a parent element that *will exist* on page load:
$("#company").on("click", ".morelink", function (event) {
event.preventDefault();
$("#gridview").removeClass("active");
$("#listview").addClass("active");
//is this where you want to restore the full description? Whenever you want, you can then pull the full description from the data-full-desc field, like this:
var $description = $(this).parents("li").find(".description");
$description.html($description.data("full-desc"));
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
});
} else if (mainId == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
//restore descriptions:
$.each($(".description"), function(i, e){
if(!!$(this).data("full-desc"))
$(this).html($(this).data("full-desc"));
});
}
});
});
* {
margin: 0;
padding: 0;
}
body {
color: #333;
padding-bottom: 25px;
}
img {
border: 0;
}
p {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 10px;
}
#wrap {
margin: 0 auto;
border-radius: 7px;
}
#wrap header {
border-bottom: 1px solid white;
margin-bottom: 35px;
padding-top: 20px;
position: relative;
}
#wrap header .list-style-buttons {
color: red;
position: absolute;
right: 0;
}
.switcher {
color: red;
}
.switcher:active {
color: #da1d15;
}
.switcher:visited {
color: #da1d15;
}
ul.list {
margin-bottom: 20px;
list-style: none;
width: 100%;
}
ul.list li {
margin-bottom: 20px;
display: block;
}
ul.list li section.left {
margin: 10px;
display: block;
float: left;
position: relative;
padding-left: 20px;
}
ul.list li .meta {
display: block;
}
ul.list li .links {
display: inline;
}
ul.list li .secondOffer {
margin-left: 20px;
}
ul.list li section.left img.thumb {
margin: 10px;
height: 150px;
width: 300px;
float: right;
}
ul.list li section.left h3 {
text-align: left;
font-weight: bold;
text-transform: uppercase;
font-size: 1.4em;
}
ul.list section.left {
padding: 20px;
}
ul.grid {
list-style: none;
margin: 0 auto;
}
ul.grid li section.left img.thumb {
height: 150px;
width: 300px;
position: relative;
}
ul.grid li {
display: block;
float: left;
width: 270px;
height: 150px;
padding: 5px 30px;
margin-bottom: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.grid li section.left {
padding: 10px;
}
ul.grid section.left {
position: relative;
height: 400px;
}
.links-position {
position: absolute;
bottom: 0;
}
ul.grid li.clearfix {
margin-bottom: 300px;
}
ul.grid li section.left h3 {
position: relative;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.5em;
}
ul.grid li .meta {
display: block;
}
ul.grid li .address {
position: relative;
}
ul.grid li .description {
position: absolute;
}
ul.grid li .links {
padding-left: 20px;
}
ul.grid .clearfix {
padding: 10px;
}
.clearfix {
}
section.left {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
section.left:hover {
-webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
-moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
box-shadow: 0 0 15px rgba(207, 168, 168, 1);
}
a:link {
color: red;
text-decoration: none;
}
a.links:visited {
color: red;
text-decoration: none;
}
a.morelink {
text-decoration: none;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<div id="wrap" class="col-xs-12">
<header>
<span class="list-style-buttons">
<i class="fa fa-2x fa-th-list"></i>
<i class="fa fa-2x fa-th"></i>
</span>
</header>
<ul id="company" class="list clearfix">
<li class="clearfix alt">
<section class="left">
<img src="" alt="company image" class="thumb">
<a href="#">
<h3>Name</h3></a>
<span class="meta address"><strong>Address: </strong></span>
<span class="meta description">DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
</span>
<span id="link-list">
<a href=""
class="links"><i class="fa fa-id-card-o"></i>
Users: </a>
<i class="fa fa-database"></i> Offers:
</span>
</section>
</li>
</ul>
</div>
jQuery's data function: https://api.jquery.com/data/
The .data() method allows us to attach data of any type to DOM
elements in a way that is safe from circular references and therefore
from memory leaks.

You could use the css text-overflow: clip when you're in the grid view to clip any text that doesn't fit inside of your element.
Options also include:
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);
From: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

If i understood your question, you want to switch between tow classes each time the button was clicked, so i prpose to use .toggleClass().

I can not make the buttons workable

I am trying to make a page with 2 questions with yes/no button using jQuery. I have used jQuery fade in/out options for this. But the buttons are not working. Can anyone help me with that??
I have given all the codes of my page with CSS and jQuery.
jQuery:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").delay(100).fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100, Function() {
$(".four").delay(100).fadeIn(100);
});
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #EEF3FA;
text-shadow: none;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.fix {
overflow: hidden;
}
.clear {
clear: both;
}
header {
background: #49639C;
text-align: center;
}
section {} footer {
text-align: center;
}
.main {
width: 750px;
margin: 0 auto;
}
.head {} .head > h1 {
color: #ffffff;
font-size: 40px;
padding: 10px;
}
.sec {
background: #6281B6;
margin-top: 15px;
border-radius: 20px 20px 0px 0px;
}
.sec > h2 {
background: url("../img/prize.png") no-repeat scroll left 80px center rgba(0, 0, 0, 0);
color: #ffffff;
font-weight: normal;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
padding: 25px;
}
.sec > h2 > span {
color: #E8ED1A;
}
.cove {
border: 1px solid #cccccc;
background: #ffffff;
padding-bottom: 10px;
}
.congrts {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.congrts > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.congrts > p {
font-size: 16px;
margin: 5px 15px 8px;
text-align: left;
color: #000000;
}
.congrts > p > strong {} .prizes {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
border-radius: 20px;
margin: 35px 15px 0px;
padding: 10px;
text-align: center;
}
.prizes > h1 {
background: none repeat scroll 0 0 #ffffff;
font-size: 30px;
margin: -30px auto 0;
text-align: center;
width: 280px;
color: #000000;
}
.item {
border-bottom: 2px dashed #cccccc;
margin-bottom: 30px;
margin-top: 20px;
padding-bottom: 15px;
padding-left: 60px;
}
.img {} .img > img {
width: 250px;
}
.text > h1 {
font-size: 30px;
margin-bottom: 5px;
}
.text > p {
font-size: 35px;
}
.text > span {
color: #FF0000;
font-size: 35px;
}
.text {
margin-top: 5px;
margin-left: 15px;
}
.anchor {
border-radius: 15px;
}
.anchor > a {
background: none repeat scroll 0 0 #6bb155;
color: #ffffff;
font-size: 35px;
padding: 10px 164px;
text-align: center;
}
.anchor > a:hover {
text-shadow: none;
}
.fotter {
margin: 10px 0px;
}
.heiighrt {
height: 580px;
}
.kolo {
margin-top: 10px;
text-align: center;
margin-bottom: 5px;
}
.kolo > h1 {
color: #3B5998;
font-size: 35px;
}
.kolo > p {
color: #666666;
font-size: 17px;
margin-top: 10px;
}
.kolo > p > strong {}.span {
text-align: left;
font-size: 14px !important;
color: #666666;
margin-top: 10px;
}
.kolo1 {
border: 1px solid #cccccc;
padding: 5px 20px;
text-align: center;
background: #ffffff;
}
.pok {
margin: 15px auto;
width: 500px;
}
.pok > img {
float: left;
}
.pok > p {
float: left;
font-size: 35px;
font-weight: bold;
margin-left: 15px;
margin-top: 50px;
}
.anchortext {
margin: 5px auto;
}
.anchortext > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 40px;
padding: 2px 150px;
}
.anchortext1 {
margin: 5px auto;
}
.anchortext1 > a {
background: none repeat scroll 0 0 #6bb155;
border: 1px solid #000000;
border-radius: 50px;
color: #ffffff;
font-size: 35px;
line-height: 50px;
padding: 1px 70px;
}
.up1 {
padding: 2px 157px !important;
}
.up2 {
padding: 2px 143px !important;
}
.full {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #cccccc;
margin-top: 30px;
text-align: center;
}
.full h1 {
color: #3c599d;
font-size: 35px;
margin-bottom: 0px;
margin-top: 10px;
}
.full h2 {
font-size: 30px;
margin-bottom: 10px;
}
.full h2 span {
color: #3C599D;
}
.full1 {
text-align: center;
}
.full1 img {
margin-top: 150px;
width: 300px;
height: 20px;
}
.qus {
margin-bottom: 5px;
}
.two, .three, .four, .load, .ditiyo, .titiyo, .chortor{display:none;}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="main head fix">
<h1>Message</h1>
</div>
</header>
<section>
<div class="main fix">
<div class="heiighrt one">
<div class="kolo">
<h1>We Need Your Comment</h1>
<p>We've selected you from 1,873,235 <strong>Mac mobile users in Australia</strong> to comment on a new app. The great news is you'll have a chance to <strong>win a cool iPad mini after this!</strong>
</p>
<p class="span">* Only 2 questions and take just 15 secs!</p>
</div>
<div class="kolo1">
<div class="pok fix">
<img src="img/ipad.png" alt="ipad on hand">
<p>Do you use Fb
<br>everyday?</p>
</div>
</div>
<div class="qusone">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">Yes
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext">No
</div>
</div>
</div>
</div>
</div>
<div class="heiighrt two">
<div class="full fix">
<h1>Question 1</h1>
<h2>Have You ever heard of <br><span>Facebook Home</span>?</h2>
<div class="qustwo">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, i know
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, Never Heard of
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt three">
<div class="full fix">
<h1>Question 1</h1>
<h2>If you get a new iPad mini,<br>will you install<span>Facebook <br>Home</span>?</h2>
<div class="qusthree">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">Yes, I love to
</div>
</div>
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">No, I don't like FB
</div>
</div>
</div>
<img src="img/ipad.png" alt="i pad on hand">
</div>
</div>
<div class="heiighrt load">
<div class="full1 fix">
<img src="img/loading.gif" alt="i pad on hand">
</div>
</div>
<div class="heiighrt four">
<div class="full full1 fix">
<h1>Thank You</h1>
<h2>You've helped in creating better apps for mobile users! Please proceed to see if<br> you will<br><strong>win the New iPad mini!</strong> </h2>
<img src="img/ipad.png" alt="i pad on hand">
<div class="qusfour">
<div class="ui-grid-solo">
<div class="ui-grid-a anchortext1">I am feeling lucky Today!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="main">
<p class="fotter">copyright 2013 Terms
Privacy
</p>
</div>
</footer>
Here the Fiddle

If you are going to want to bind your buttons that are hidden then my suggstion would be to switch to the following format
$(document).on('click', '.qustwo', function() { ...your code here... });
That should take care of it.

Try replacing your script by this:
$(document).ready(function () {
$(".qusone").click(function () {
$(".one").fadeOut(100);
$(".two").fadeIn(100);
});
$(".qustwo").click(function () {
$(".two").fadeOut(100);
$(".three").delay(100).fadeIn(100);
});
$(".qusthree").click(function () {
$(".three").fadeOut(100);
$(".full1").delay(2200).fadeIn(100);
});
$(".qusfour").click(function () {
$(".full1").fadeOut(100);
$(".four").delay(100).fadeIn(100);
});
});
You still need to clean up your code though to get intended flow.