Fancy and Animated Hide and Show of Paragraph Tag using jQuery


Preface

Download

This post shows how to create a Fancy and Animated Hide and Show of Paragraph Tag in ASP.NET using jQuery. Please assume this post as addition to my last post titled "Animated Hide and Show of Paragraph Tag using jQuery". If you review my last post, you will notice that I have used two different <a> tags that is <a href="#" class="show"> and <a href="#" class="hide">, and by using jQuery .hide() and .show() methods I switched both one by one. But it is not the right way, if jQuery has compound effects. If we use Compound Effects, only a single <a> tag will do all this, even rest coding will become short and quick.

Setup Demonstration Page

Let's setup the demonstration page, find the code below:


Steup jQuery Methods

Let's setup the jQuery methods, find the code below:


This toggling can be achieved by first checking the visibility of the matched elements and then calling the appropriate method. Using an if/else statement is a perfectly reasonable way to toggle elements' visibility. However, with jQuery's compound effects we can remove some conditional logic from our code. jQuery provides a .toggle() method, which acts like .show() and .hide(), and like them, can be used with a speed argument or without. Code will be something like

$P1.slideToggle('slow');

Here is the new code snippets that is using .toggle() method:


Find my running screen below.


I hope you like it.

Comments

Post a Comment

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Image
As you know ASP.NET Core Identity (table structure) is different from what we had earlier in ASP.NET Identity. Actually the identity system which we have today with .NET Core is very mature and continuously evolved be it ASP.NET Membership, ASP.NET Identity 1, ASP.NET Identity 2 and now ASP.NET Core Identity. Recently I had to migrate few application to ASP.NET Core and similar its identity database. Because the table schema is changed, i had to re-think and create migration script which I would like to share with you today. It is very simple and easy, just three step and I had everything ready: STEP 1 : Change name of existing tables STEP 2 : Create ASP.NET Core Identity tables STEP 3 : Migrate data from old tables (ASP.NET Identity) to new tables (ASP.NET Core Identity) Script:  https://gist.github.com/itorian/c699e8534b392a6c726ec66c48100072 You should also watch my video, where I demoed migration.
Read More »

Customize User's Profile in ASP.NET Identity System

Image
Note: You should read this post instead, I found below walkthrough will not work on ASP.NET Identity 2. I will re-work on this post soon. In this post you will learn how to customize User’s Profile and add some more fields like FirstName, LastName, EmailID etc with ASP.NET Identity System. In my last post I listed some of the great new features introduced with Identity system .
Read More »

Lambda two tables and three tables inner join code samples

In this blog post you will learn inner join using lambda queries. There will be two samples, in first sample you will see how you can join two tables and in second sample you will see how you can extend even further to join three tables and so on. I will sample in-memory data, but the same implementation will work with IQueryable (lazy query) too. Here's the code snippet:- namespace ConsoleApp1 {     class Program     {         static void Main()         {             var table1 = new List<Table1>();             table1.Add( new Table1 { Id = 1, Name = "Name 1" , Address = "Address 1" });             table1.Add( new Table1 { Id = 2, Name = "Name 2" , Address = "Address 2" });             table1.Add( new Table1 { Id = 3, Name = "Name 3" , Address = "Address 3" });             table1.Add( new Table1 { Id = 4, Name = "Name 4" , Address = "Address 4" });   
Read More »