I am looking to implement CSS styling for the selected item in Meteor JS. I have created a sample example with a list of names, and when a name is clicked, I want to display the details of that name. Therefore, I need to visually highlight the clicked name in the list. The names are retrieved using Publish/Subscribe methods in this example. How can I achieve highlighting the selected item in the list of names? Please refer to the code and CSS below [The CSS hover effect works, but the active state does not]. Any suggestions on what to do?
Template Code :
<template name="client">
<div style="float:left;">
<div style="float:left;">
<h2> Clients List</h2>
{{#each clientname}}
<div class="client {{isselected}}">{{name}}</div>
{{/each}}
</div>
<div style="float:left;padding-left:400px;">
{{> clientmaincontent}}
</div>
</div>
</template>
<template name="clientdata">
<div>
<h1> This is Client Data</h1>
<div style="font-weight:bold;font-size:24px;">Name : {{cname}}</div></br>
<div style="font-weight:bold;font-size:24px;">ID : {{id}}</div> </br>
<div style="font-weight:bold;font-size:24px;">Hcare : {{hcare}}</div>
</div>
</template>
CSS :
.client .selected
{
background-color: red;
}
.client {
cursor: pointer;
width:200px;
height:20px;
border:4px solid #eeeee8;
border-radius: 4px;
-moz-border-radius: 4px;
margin: 4px;
// float:left;
text-align: center;
background-color:#eeeee8;
font-size: 20px;
}
JS Code :
Template.client.events
({
'click .client' : function (e,t)
{
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
//alert("You pressed the button");
console.log("You pressed the Client button");
e.preventDefault();
Session.set("selectedClient", this.name);
}
});
Template.client.isselected = function ()
{
console.log("Hello DD="+Session.equals("selectedClient", this.name) ? "selected" : '');
return Session.equals("selectedClient", this.name) ? "selected" : '';
};