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>

Can you share a live page url of this problem so i can analyze?

Try using the JS forum mate. Will get alot more help then.