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

Executing PowerShell scripts from C#

Image
Please refer the original post from here http://blogs.msdn.com/b/kebab/archive/2014/04/28/executing-powershell-scripts-from-c.aspx I n today’s post, I will demonstrate the basics of how to execute PowerShell scripts and code from within a C#/.NET applications. I will walk through how to setup your project prerequisites, populate the pipeline with script code and parameters, perform synchronous and asynchronous execution, capture output, and leverage shared namespaces. Update 8/7/2014 : Here is the downloadable solution file. Update 11/5/2014 : Added a section on execution policy behavior. Prerequisites: First, ensure that PowerShell 2.0 or later is installed on the system you are developing on. The features used below will not be supported on PowerShell 1.0. Next, start by making a new console application (targeting .NET 4.0) in Visual Studio. In the solution explorer, add a project reference to the System.Management.Automation assembly * . On my machine (PowerShe...
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

Exposing Agile Software Development Myths

Agile development is a movement that started 11 years ago and now is a commonplace discussion for software development teams. Prior to the signing of the Agile Manifesto in Utah in 2001 [endnote 1], the world was using a phased methodology called “Waterfall,” introduced (but not named) by Winston W. Royce [2], ironically trying to explain why that methodology was a bad idea. The methodology forced the completion of a phase in order to continue with the next one. That caused some problems since, no matter how hard the developers tried to gather all requirements and create a full system design, there was always the need in the following phases to go back and change things. Those regressions had a big impact on cost. The Agile principles tried to eliminate all the rigidity of Waterfall by focusing on more productive tasks, like working code over comprehensive documentation, adding more customer collaboration, enforcing individual interactions instead of tools and being a...
Read more