We Keep Coding

Search UL generated by MySQL & PHP

I've implemented a search bar that loops into an UL (myUL) and display the results (h5). This works fine for static data but once I implement the PHP call to fetch MySQL, the search won't work and display the results anymore. On the console I see that it's not able to find the query results.
console log
Here's the piece of the code I've implemented the Search Input and ran the query:
<div class="page">
<div class="page-content">
<!-- Panel -->
<div class="panel">
<div class="panel-body">
<form class="page-search-form" role="search">
<div class="input-search input-search-dark">
<i class="input-search-icon md-search" aria-hidden="true"></i>
<input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users">
<button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
</div>
</form>
<div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs">
<div class="dropdown page-user-sortlist">
Order By: <a class="dropdown-toggle inline-block" data-toggle="dropdown"
href="#" aria-expanded="false">Last Active</a>
<div class="dropdown-menu animation-scale-up animation-top-right animation-duration-250"
role="menu">
<a class="active dropdown-item" href="javascript:void(0)">Last Active</a>
<a class="dropdown-item" href="javascript:void(0)">Username</a>
<a class="dropdown-item" href="javascript:void(0)">Location</a>
<a class="dropdown-item" href="javascript:void(0)">Register Date</a>
</div>
</div>
<!-- KIEL ALL CONTACTS -->
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
</ul>
<div class="tab-content">
<div class="tab-pane animation-fade active" id="all_contacts" role="tabpanel">
<ul class="list-group" id="myUL">
<?php
$result = mysqli_query($conn,"SELECT * FROM customer");
while($row = mysqli_fetch_array($result))
{
?>
<li class="list-group-item">
<div class="media">
<div class="pr-0 pr-sm-20 align-self-center">
<div class="avatar avatar-online">
<img src="../../../global/portraits/1.jpg" alt="...">
<i class="avatar avatar-busy"></i>
</div>
</div>
<div class="media-body align-self-center">
<h5 class="mt-0 mb-5 name">
<?php echo $row["customerName"]; ?>
<small>Ultimo Acesso: <?php echo $row["customerLastLogin"]; ?></small>
</h5>
<p>
<i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd
</p>
<div>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-email" aria-hidden="true" title="<?php echo $row["customerEmail"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-smartphone" aria-hidden="true" title="<?php echo $row["customerPhone"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="fas fa-box-open md-smartphone" aria-hidden="true" title="<?php echo $row["customerId"]; ?>"></i>
</a>
</div>
</div>
<div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
<button type="button" class="btn btn-icon btn-primary waves-effect waves-classic" data-toggle="modal" data-target="#updateUser<?php echo $row['customerId']?>">
<i class="fas fa-pencil-alt md-notifications" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-icon btn-danger waves-effect waves-classic">
<i class="fas fa-trash-alt md-notifications" aria-hidden="true"></i>
</button>
</div>
</div>
</li>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
console.log(li);
// debugger;
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("h5")[0];
txtValue = a.textContent || a.innerText;
// debugger;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</ul>
<?php
}
// close connection database
mysqli_close($conn);
?>
Any idea?
Thanks.

knockout sortable update function afer moving item to different position

I have knockout sortable bookmark page where it is possible to group your bookmarks and change the position. I have all my functions working but i can't seem to get the "afterMove" to work. This is my view:
<div class="col-lg-12">
<div class="bookmarkIconsBox">
<div data-bind="droppable: newGroup, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
<div data-bind="droppable: deleteItem, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
<input class="title" data-bind="textInput: $root.groupname()" />
<span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
<input class="title" data-bind="textInput: $root.bookmarkname()" />
<span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
</div>
</div>
<div data-bind="foreach: allBookmarks.bookmarkGroups" class="col-lg-12">
<div class="bookmarkBoxTitle">
<h3 class="title" data-bind="text: Description" />
<span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
</div>
<div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass : 'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
</div>
</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">
<div>
<span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
<span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
</div>
<div class="card-block">
<div class="bookmarkBoxTitle">
<h4 class="card-title" data-bind="text: Description " />
<h4 class="card-title" data-bind="text: $index" />
</div>
<ul class="card-text">
<li data-bind="text: workspace"></li>
<li data-bind="text: role"></li>
</ul>
<a class="btn btn-primary" data-bind="attr : {'href': '/#page/' + link }">Ga naar</a>
</div>
</div>
When i move an item in in a group or to a different group i want it to execute the $root.update() but i can't seem to get it to work.

Bootstrap Model is closed everytime after click on the cancel icon in AngularJS?

I have to remove the product from the list. My product is removed properly but after I click on the cancel icon, the model closes. I am using AngularJS.
/**
* #Summary: removeSelectedProductFromAlbum function, remove the productKey from the album
* #param: event, index, productObject
* #return: NA
* #Description:
*/
$scope.albumKey = [];
$scope.albumObject = [];
$scope.setAlbumObject = [];
$scope.removeSelectedProductFromAlbum = function(event, index, productObject) {
//GET THE ALBUM OBJECT FROM THE SCOPE
$scope.setAlbumObject = $scope.setAlbumObject;
//PROCESS TO REMOVE productKeyId IN ALBUM.
var productKeyId = productObject.keyId;
if(productKeyId != undefined) {
if($scope.productsKeyIdList != undefined && $scope.productsKeyIdList != null) {
var index = $scope.productsKeyIdList.indexOf(productKeyId);
$scope.productsKeyIdList.splice(index, 1);
updatedProductKeyArray = $scope.productsKeyIdList;
//Calling updateArray inner function for update sharedBuyerKeyIdList after remove the keyId
updateArray();
}
}
}
//CALLING THE updateArray FUNCTION FOR UPDATE THE PRODUCT AFTER DELETING THE DATA
function updateArray () {
var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');
// Updating product key in album.
PRODUCT_DB_REF.child($scope.setAlbumObject.key).update({
productKey : updatedProductKeyArray
});
CMN.showNotification("top","center","info","Product is Successfully Removed");
//$(event.currentTarget).parents("#hideAfterRemove").hide("slow");
}
<div style="overflow:auto; max-height:300px;" >
<div class="dashboard-prod-wrap decorCardD2"
style="width:342px;" ng-repeat="sellerAlbum in sellerSelAlbumProducts" ng-if="sellerSelAlbumProducts.length > 0">
<i class="fa fa-remove" style="font-size:14px; cursor:pointer;" title="Remove"
ng-click="removeSelectedProductFromAlbum($event, $index, sellerAlbum)">
</i>
<div class="w3-row w3-padding-top ng-cloak">
<span class="pull-left color-d4 text-capitalize no-wrap dash-prod-name w3-small ng-cloak">
<span class="product-name" style='padding-right:3px;'>
{{sellerAlbum.categoriesDto.categoryName}}
</span>
<span class="w3-text-teal ng-cloak">
<b>{{sellerAlbum.sellerProductDesignsDtos[0].designsName}}</b>
</span>
<span class="w3-text-teal ng-cloak" ng-if="sellerAlbum.designNumber != 'undefined'">
-<b>{{sellerAlbum.designNumber}}</b>
</span>
<small class="text-muted w3-left w3-price-tag ng-cloak">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.fixedPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.fixedPrice}}</strike>
<span class="w3-text-green">
{{sellerAlbum.offerPrice}}
</span>
</span>
</small>
<small class="text-muted w3-left w3-price-tag ng-cloak" ng-if="sellerAlbum.fixedPrice == 0">
<div class='list-icon-f'>
<i class="fa fa-inr" aria-hidden="true"></i>
</div>
<span ng-if="!sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
{{sellerAlbum.maxPrice}}
</span>
<span ng-if="sellerAlbum.inOffer">
<i class="fa fa-inr"></i>
<strike class="w3-text-red">{{sellerAlbum.maxPrice}}</strike>
<strong class="w3-text-green">
{{sellerAlbum.offerPrice}}
</strong>
</span>
<small class="w3-small"> (<i class="fa fa-inr"></i>{{sellerAlbum.minPrice}}
- <i class="fa fa-inr"></i>{{sellerAlbum.maxPrice}})
</small>
</small>
</span>
<div class="pull-right ng-cloak" style="width:100%;margin-top:10px;">
<div class='owner-img'>
<img src="{{sellerAlbum.sellerDto.userTypeDto.imageURL != 'null' ? sellerAlbum.sellerDto.userTypeDto.imageURL : '/static/assets/img/image_placeholder.jpg'}}"
alt="Avatar" class="w3-right w3-circle w3-margin-left">
</div>
<small class="text-uppercase w3-tiny text-muted text-right ng-cloak">
<b>{{sellerAlbum.sellerDto.personName}}</b>
<span ng-repeat="address in sellerAlbum.sellerDto.userTypeDto.userTypeAddressDtos"
ng-if="address.keyId === sellerAlbum.sellerDto.userTypeDto.defaultAddressKeyId">
- <b>{{address.city}}</b>
</span><br>
</small>
</div>
</div>
<hr class="w3-clear margin0">
<div class="w3-row-padding w3-padding-top" style="margin: 0 -16px">
<!-- START:This will display Large Product Image -->
<div class="dashboard-prod-col-left w3-center">
<div class="text-center w3-padding-8"
ng-init="setImageURLList[sellerAlbum.keyId] = sellerAlbum.sellerProductSetDto[0].setImageURLList">
<div ng-repeat="image in setImageURLList[sellerAlbum.keyId]"
ng-click="sellerAlbum.defaultImageURL = image.imageURL"
onClick="imgShadowArr(this);"
ng-init="sellerAlbum.defaultImageURL = setImageURLList[sellerAlbum.keyId][0].imageURL"
class="dashboard-prod-img-wrap {{sellerAlbum.defaultImageURL == image.imageURL ? 'w3-border-teal-orange' : ''}}">
<img src="{{image.imageURL}}" class="prod-img-xs cursor-pointer">
</div>
<div class="dashboard-prod-img-wrap"
ng-if="productImgsList[sellerAlbum.keyId].length < 1">
<img src="/static/assets/img/product_default.jpg"
class="prod-img-xs">
</div>
</div>
</div>
<!-- END:This will display Large Product Image -->
<div class="dashboard-prod-col-right w3-center hover-div">
<img src="{{sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL != null ? sellerAlbum.sellerProductSetDto[0].setImageURLList[0].imageURL :'/static/assets/img/product_default.jpg'}}"
class="cursor-pointer" style="max-height:200px;border:1px solid black;">
<br>
</div>
</div>
<div class="">
<div class="text-center pull-left ng-cloak list-by-a list-by-color">
<div class='list-icon'>
<i class="fa fa-th-large" aria-hidden="true"></i>
</div>
<ul class='margin0'>
<li class="prodColorWrap" ng-repeat="productSet in sellerAlbum.sellerProductSetDto track by $index"
style="cursor:pointer; background-color:{{productSet.colorCode}}"
ng-click="setImageURLList[productSet.keyId] = sellerAlbum.setImageURLList;
productSet.defaultImageURL = setImageURLList[productSet.keyId][0].imageURL">
</li>
</ul>
</div>
<div class='w3-offer-tag' ng-if="sellerAlbum.inOffer">
<label>
<i class="fa fa-star w3-spin"></i>
Offer
</label>
</div>
</div>
<br>
</div>
function for remove icon , please sir how to fix this issue?

Collapse Tree View In MVC

I have treeview in MVC with javascrip:
Scripts:-
$(document).ready(function() {
$('.tree > ul').attr('role', 'tree').find('ul').attr('role', 'group');
$('.tree').find('li:has(ul)').addClass('parent_li').attr('role', 'treeitem').find(' > span').attr('title', 'Collapse this branch').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(':visible')) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
}
else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
Html code in MVC:
<div class="container-fluid" style="">
<div class="row-fluid">
<section role="main" class="span12">
<div class="tree well">
<ul>
<li>
<span id="item-2" class="">
<i class="icon-plus-sign getChild" id="parentClick-2"></i>
<img src="/Content/img/man.png" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
<h6 class="family-h2-name">
Dhiren Patel<br />
dhin#123.com<br />
9974745511 <br />
<a href="/FamilyTree/Add/2" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
<i class="fa fa-plus" id="btnAdd"></i>
</a>
<a href="/FamilyTree/Add/2" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
<i class='fa fa-pencil' id='btnEdit'></i>
</a>
<a id='btnDelete-2' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
<i class='fa fa-trash-o' id='btnDelete'></i>
</a>
</h6>
</span>
<ul id="child-2"></ul>
<span id="item-4" class="">
<i class="icon-plus-sign getChild" id="parentClick-4"></i>
<img src="/Content/img/man.png" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
<h6 class="family-h2-name">
akshay mistry<br />
akshay#mistri.com<br />
9977886655 <br />
<a href="/FamilyTree/Add/4" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
<i class="fa fa-plus" id="btnAdd"></i>
</a>
<a href="/FamilyTree/Add/4" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
<i class='fa fa-pencil' id='btnEdit'></i>
</a>
<a id='btnDelete-4' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
<i class='fa fa-trash-o' id='btnDelete'></i>
</a>
</h6>
</span>
<ul id="child-4"></ul>
<span id="item-13" class="">
<i class="icon-plus-sign getChild" id="parentClick-13"></i>
<img src="/Content/img/FamilyTree/china-red-seamless-background-pattern.jpg" class="img-thumbnail img-family" alt="Cinque Terre" style="width:130px;height:130px">
<h6 class="family-h2-name">
daks patel<br />
dkpatel#123.com<br />
7867564534 <br />
<a href="/FamilyTree/Add/13" id="btnAdd" class="btn-u btn-u-orange btnAdd btnHref" type="button" data-toggle="tooltip" data-placement="bottom" title="Add" >
<i class="fa fa-plus" id="btnAdd"></i>
</a>
<a href="/FamilyTree/Add/13" id='btnEdit' class='btn-u btn-u-orange btnHref' type='button' data-toggle='tooltip' data-placement='bottom' title='Edit'>
<i class='fa fa-pencil' id='btnEdit'></i>
</a>
<a id='btnDelete-13' class='btn-u btn-u-orange btnHref btnDelete' data-toggle='tooltip' data-placement='bottom' title='Delete'>
<i class='fa fa-trash-o' id='btnDelete'></i>
</a>
</h6>
</span>
<ul id="child-13"></ul>
</li>
</ul>
</div>
</section>
</div>
</div>
Problem is:-
I want Collapse all children of ROOT node: level 2,3,4,5... (root is level 1 node) want treeview star.How to collapse and expand particular selected root.

How can I have the inbox area show once the document is finished loading?

Basically trying to create kind of an inbox for my person portfolio (more of a learning experience, then anything serious, or of use).
Right now when this document loads within an ajax/javascript function, it loads showing ALL emails (instead of just showing the Inbox section by default)
I've tried adding a function in javascript for "on document load" but I believe I may not have the css correct or anything.
My code is below:
<div id="messages" class="container-fluid">
<div class="row">
<div id="breadcrumb" class="col-xs-12">
<a href="#" class="show-sidebar">
<i class="fa fa-bars"></i>
</a>
<ol class="breadcrumb pull-left">
<li>Dashboard</li>
<li>Modules</li>
<li>Messages</li>
</ol>
<div id="social" class="pull-right">
<i class="fa fa-google-plus"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
</div>
</div>
<div class="row" id="test">
<div class="col-xs-12">
<div class="row">
<ul id="messages-menu" class="nav msg-menu">
<li>
<a href="#" class="" id="msg-inbox">
<i class="fa fa-inbox"></i>
<span class="hidden-xs">Inbox (<?php echo $inboxCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-starred">
<i class="fa fa-star"></i>
<span class="hidden-xs">Unread (<?php echo $unreadCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-important">
<i class="fa fa-bookmark"></i>
<span class="hidden-xs">Read (<?php echo $readCount; ?>)</span>
</a>
</li>
<li>
<a href="#" class="" id="msg-trash">
<i class="fa fa-trash-o"></i>
<span class="hidden-xs">Trash (<?php echo $trashCount; ?>)</span>
</a>
</li>
</ul>
<div id="messages-list" class="col-xs-10 col-xs-offset-2">
<?php
while ($row = mysqli_fetch_assoc($getEmails)) {
$email_id = $row['email_id'];
$emailStatus = $row['emailStatus'];
$contactName = $row['contactName'];
$contactEmailAddress = $row['contactEmailAddress'];
$messageBody = $row['messageBody'];
$tempEmailDate = $row['emailDate'];
$emailDate = date("d-m-Y", strtotime($tempEmailDate));
$contactName = strtoupper($contactName);
$contactEmailAddress = strtoupper($contactEmailAddress);
if ($row == 1 && ($emailStatus == 1 || $emailStatus == 2)) {
echo "
<div class='row one-list-message msg-inbox-item' id='msg-one'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else if ($emailStatus == 1 || $emailStatus == 2) {
echo "
<div class='row one-list-message msg-inbox-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
if ($emailStatus == 1) {
// Unread section
echo "
<div class='row one-list-message msg-starred-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
$updateEmailStatus = mysqli_query($db, "UPDATE emails SET emailStatus='2' WHERE email_id='$email_id'");
} else {
if ($emailStatus == 2) {
// Read section
echo "
<div class='row one-list-message msg-important-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
} else {
if ($emailStatus == 3) {
// Deleted section
echo "
<div class='row one-list-message msg-trash-item'>
<div class='col-xs-1 checkbox'>
<label>
<input type='checkbox'>$contactName
<i class='fa fa-square-o small'></i>
</label>
</div>
<div class='col-xs-9 message-title'>$messageBody</div>
<div class='col-xs-2 message-date'>$emailDate</div>
</div>
";
}
}
}
}
?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#msg-inbox').show();
});
// Add listener for redraw menu when windows resized
window.onresize = MessagesMenuWidth;
$(document).ready(function() {
// Add class for correctly view of messages page
$('#content').addClass('full-content');
// Run script for change menu width
MessagesMenuWidth();
$('#content').on('click','[id^=msg-]', function(e){
e.preventDefault();
$('[id^=msg-]').removeClass('active');
$(this).addClass('active');
$('.one-list-message').slideUp('fast');
$('.'+$(this).attr('id')+'-item').slideDown('fast');
});
$('html').animate({scrollTop: 0},'slow');
});
</script>
Can anyone see how I'd do the javascript to have the msg-inbox load when the page loads? instead of loading none and displaying all emails.
Thank you!

When trying to hide and/or show divs, jquery is your best friend. It's simple and looks nice.
Start by wrapping your read & unread messages in a div id of "inbox"
Then give each of your inbox divs an id like "read" & "unread"
Using the code below you can hide/show your individual divs.
Place this between your <head> </head> tags
<script src="JS/jquery/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
$("#Unread").click(function(){
$("#unread").slideToggle(500, function() {
});
});
$("#Read").click(function(){
$("#read").slideToggle(500, function() {
});
});
$("#Deleted").click(function(){
$("#deleted").slideToggle(500, function() {
});
});
});
</script>
<style>
#unread {
display: none;
}
#read {
display: none;
}
#deleted {
display: none;
}
</style>
Then in the body of your page, you can do something like this
<div id="inbox">
<div id="unread_msgs">
<button id="Unread">Show/Hide Unread</button>
<div id="unread">
<p>These </p>
<p>are</p>
<p>my</p>
<p>unread</p>
<p>messages</p>
</div><!-- end unread -->
</div><!-- end unread_msgs -->
<div id="read_msgs">
<button id="Read">Show/Hide Read</button>
<div id="read">
<p>These </p>
<p>are</p>
<p>my</p>
<p>read</p>
<p>messages</p>
</div><!-- end read -->
</div><!-- end read_msgs -->
</div><!-- end inbox -->
<div id="deleted_msgs">
<button id="Deleted">Show/Hide Deleted</button>
<div id="deleted">
<p>These </p>
<p>are</p>
<p>my</p>
<p>deleted</p>
<p>messages</p>
</div>
</div>
Hope this helps. It should get you going in the right direction.
References
jquery slidetoggle