Expandable Control in Windows Store App Using JQuery

Introduction

In this article we will implement an expandable control in a Metro Style Application using jQuery. The expandable control contains the text of a topic; initially it will show less than 500 characters. The logic is that if the control contains less than 500 characters of text then the link will remain hidden but if it contains more than 500 characters then a link "more..." will be shown and the user can click on the link to expand the control.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it:

Open Visual Studio 2012
File -> New -> Project
Choose Template -> JavaScript -> Metro Style Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following is the contents of the project:

JavaScript Code
Style Sheet Code

Code :

$(document).ready(function () {

var showChar = 500;

var ellipsestext = "...";

var moretext = "more";

var lesstext = "less";

$('.more').each(function () {

var content = $(this).html();

if (content.length > showChar) {

var c = content.substr(0, showChar);

var h = content.substr(showChar - 1, content.length - showChar);

var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>'

+ h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';

$(this).html(html);

}

});

$(".morelink").click(function () {

if ($(this).hasClass("less")) {

$(this).removeClass("less");

$(this).html(moretext);

} else {

$(this).addClass("less");

$(this).html(lesstext);

}

$(this).parent().prev().toggle();

$(this).prev().toggle();

return false;

});

</script>

Code :

a {

color: #0254EB

}

a:visited {

color: #0254EB

}

a.morelink {

text-decoration:none;

outline: none;

}

.morecontent span {

display: none;

}

.comment {

width: 800px;

background-color: #f00;

margin: 10px;

font-size:20px;

border:5px;

}

</style>

Step 4 : The complete code of this application is written below. It contains the code of the HTML file code and the JavaScript file code.

Code :

<!DOCTYPE html>

<html>

<head>

$(document).ready(function () {

var showChar = 500;

var ellipsestext = "...";

var moretext = "more";

var lesstext = "less";

$('.more').each(function () {

var content = $(this).html();

if (content.length > showChar) {

var c = content.substr(0, showChar);

var h = content.substr(showChar - 1, content.length - showChar);

var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>'

+ h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';

$(this).html(html);

}

});

$(".morelink").click(function () {

if ($(this).hasClass("less")) {

$(this).removeClass("less");

$(this).html(moretext);

} else {

$(this).addClass("less");

$(this).html(lesstext);

}

$(this).parent().prev().toggle();

$(this).prev().toggle();

return false;

});

</script>

a {

color: #0254EB

}

a:visited {

color: #0254EB

}

a.morelink {

text-decoration:none;

outline: none;

}

.morecontent span {

display: none;

}

.comment {

width: 800px;

background-color: #f00;

margin: 10px;

font-size:20px;

border:5px;

}

</style>

</head>

<body>

<div class="comment more"><h2 style="font-weight:bold">Expandble control in Metro Apps Using jQuery</h2></div>

<h2 style="font-weight:bold">Caching in ASP.NET</h2><br />

Caching is a technique of persisting the data in memory for immediate

access to requesting program calls. Many in the developer community

consider caching as one of the features available to

improve performance of Web applications

<h2 style="font-weight:bold">why caching.......</h2><br />

Consider a page that has list of Employee name, contact numbers

and mail-Ids of existing employees of a company on an intranet accessible

by all employees. This is very useful information that is available throughout

the company and could also be one of the most accessed pages. The functionality of

adding, updating or deleting is usually less intensive compared to more

transaction-based systems like Purchase ordering, Voucher creation etc.

Now in a normal scenario the process of querying database for each request is

not cost-effective in terms of server resources, hence is lot better to cache

or persist the data to avoid this costly loss of resources.

</div>

</body>

</html>

Step 5 : After running this code the output looks like this:

Click on the "more.." link: