Hy i have this js code:
<script type="text/javascript">
var msg_id;
@if(Session::has('message'))
{{"msg_id = ".Session::get('message').";"}}
<?php Session::forget('message'); ?>
@endif
$(function(){
jQuery.each( inbox, function( i, val ) {
$('#contact_'+val).parent().addClass('inbox');
});
jQuery.each( others, function( i, val ) {
$('#contact_'+val).parent().addClass('others');
});
$(".others").addClass('hide');
$("#inbox").removeClass('bg-inverse').addClass('bg-primary');
if(msg_id){
console.log(others);
if($.inArray(msg_id.toString(),others)>-1){
$('#others').trigger('click');
}
$('#contact_'+msg_id).trigger('click');
}else{
if(inbox_1.length>0){
if(others_1.length>0){
$('#contact_'+inbox_1[0]).trigger('click');
}else{
$('#contact_'+inbox_1[0]).trigger('click');
}
}else{
if(others_1.length>0){
$('#others').trigger('click');
$('#contact_'+others_1[0]).trigger('click');
}else{
$('.inbox:first').children().trigger('click');
}
}
}
});
$('#inbox').on('click',function(){
$("#inbox").removeClass('bg-inverse').addClass('bg-primary');
$("#others").removeClass('bg-primary').addClass('bg-inverse');
$('.others').addClass('hide');
$('.inbox').removeClass('hide');
});
$('#others').on('click',function(){
$("#others").removeClass('bg-inverse').addClass('bg-primary');
$("#inbox").removeClass('bg-primary').addClass('bg-inverse');
$('.inbox').addClass('hide');
$('.others').removeClass('hide');
});
</script>
its works, but ii have two rows Inbox and Other on the same css, what i whant is when is inbox two show one part of html content, when i click others to be another part of content because now its change in all html
the html code is
<div class="media-body">
<div>
<span class="strong" data-bind="text: matchName"></span>
<small class="text-italic pull-right label label-default" data-bind="text: matchTime"></small>
</div>
but when its click other i whant to be this
<div class="media-body">
<div>
second
<small class="text-italic pull-right label label-default" data-bind="text: matchTime"></small>
</div>