How to use jQuery to switch between a plus and minus sign on collapse and expand?

1. Add Jquery script ignore if already added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

2. Add Javascript to show hide
 <script type="text/javascript">   
        $(".question").click(function () {
            if ($(this).next(".answer").is(":hidden")) {
                $(this).next(".answer").slideDown("slow");
                $(this).children('span').text('-');
            } else {
                $(this).next(".answer").slideUp("slow");
                $(this).children('span').text('+');
            }
        });

    </script>

3. Add content as like given below

<div class="question">
            <span style="font-size: 30px;">+</span><h1 style="display: inline !important;">Heading - 1 </h1>
        </div>
        <div class="answer">
            <ul class="sub-menu">
                <li>Line 1</li>
                <li>Line 2</li>
                <div class="question">
                    <span style="font-size: 30px;">+</span><h2 style="display: inline !important;">Inner Heading 1</h2>
                </div>
                <div class="answer">
                    <li>Child - Line 1</li>
                    <li>Child - Line 2</li>
                </div>

            </ul>
        </div>

That's All, Enjoy

Comments

Post a Comment

Popular posts from this blog

How to create RSS Feed in Asp.Net

using System; using System.Data; using System.Configuration; using System.Data.SqlClient; using System.Text; using System.Xml; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string connectionString = ConfigurationManager.ConnectionStrings["TestConnection"].ConnectionString; DataTable dt = new DataTable(); SqlConnection conn = new SqlConnection(connectionString); using (conn) { SqlDataAdapter ad = new SqlDataAdapter("SELECT * from tblRSS", conn); ad.Fill(dt); } Response.Clear(); Response.ContentType = "text/xml"; XmlTextWriter TextWriter = new XmlTextWriter(Response.OutputStream, Encoding.UTF8); TextWriter.WriteStartDocument(); //Below tags are mandatory rss tag TextWriter.WriteStartElement("rss"); TextWriter.WriteAttributeString("versio...
Read more

Auto generate change scripts in SQL Server Management Studio SSMS for tables

Image
Problem As a part of my best practices, I always save the T-SQL scripts used for creation and modification of objects in SQL Server. When creating and modifying tables using SQL Server Management Studio designer it is easy to right click in the designer and select "Generate Change Script...", but is there a way to automatically script the creation and/or modification of tables made through of SQL Server Management Studio (SSMS) designer?  This tip shows you an option that exists within SSMS to automatically generate these scripts for all table changes when using the table designer. Solution Within SQL Server Management Studio (SSMS) there is an option to automatically generate scripts for your changes done through the GUI.  The solution for this problem is provided in SSMS and works with both SQL Server 2005 and SQL Server 2008, but by default this option that we will discuss is disabled. To enable the option From the SSMS menus click on "Tools"  ...
Read more

HOW TO Use the NumericUpDown Control

HOW TO Use the NumericUpDown Control  Great help taken from  http://www.asp.net/ajaxlibrary/HOW%20TO%20Use%20the%20NumericUpDown%20Control.ashx NumericUpDown Demonstration NumericUpDown Description NumericUpDown is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to add "up" and "down" buttons that increment and decrement the value in the TextBox. The increment and decrement can be simple +1/-1 arithmetic, they can cycle through a provided list of values (like the months of the year), or they can call a Web Service to determine the next value. Page authors can also provide custom images to be used instead of the default up/down button graphics. Video - How Do I: Use the ASP.NET AJAX NumericUpDown Control? NumericUpDown Client Code Sample view plain copy to clipboard print ? < script   runat = "server" >        [System.Web.Services.W...
Read more