CODEWITHSUNDEEP
jqueryhtmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to toggle a div to slide up and down

I am trying to slide toggle a hidden DIV when a user hover overs some link buttons.

JavaScript:

$(function () { // DOM ready shorthand

            var $content = $(".sliderText");
            var $contentdiv = $(".sliderContent");

            var $homeToggle = $("#home");
            var $listToggle = $("#list");

            $contentdiv.hide();

            $homeToggle.hover(function () {
                $content.Text("Navigate to Home");
                $contentdiv.stop().slideToggle();
            });
            $listToggle.hover(function () {
                $content.Text("SDSFDFS");
                $contentdiv.stop().slideToggle();
            });
        });

CSS:

    .sliderContent {
        margin: 0 auto;
        text-align: center;
        border: 2px dotted #00039a;
        padding: 5px;
    }

HTML:

<div>
                <div class="container" id="homeDIV" runat="server" clientidmode="Static">
                    <a id="home" title="Navigate to home page" href="Default.aspx">Home</a>
                </div>
                <div class="container" id="listDIV" runat="server" clientidmode="Static">
                    <a id="list" title="Shows all the fields and their indexes per PDF form in the folder" href="ListFormFields.aspx">List PDF Form Fields</a>
                </div>
                <div class="container" id="createDIV" runat="server" clientidmode="Static">
                    <a id="create" title="Allows user to enter the data in HTML/ASP.NET controls to be populated in PDF forms" href="CreateW9.aspx">Create PDF From Fill-In</a>
                </div>
                <div class="container" id="queryDIV" runat="server" clientidmode="Static">
                    <a id="query" title="Auto-generates the PDF based on a search by the user" href="PDFQueryCreate.aspx">Create PDF Quering a DataBase</a>
                </div>
                <div class="container" id="displayDIV" runat="server" clientidmode="Static">
                    <a id="display" title="" href="PDFAllFilesDisplay.aspx">Display All Completed PDF Files</a>
                </div>
                <div class="container" id="emailDIV" runat="server" clientidmode="Static">
                    <a title="Contact the developer for support" href="mailto:[email protected]">Email Support</a>
                </div>
                <div id="showText" class="sliderContent" runat="server" clientidmode="Static">
                    <span class="sliderText"></span>
                </div>
            </div>

What I am looking to achieve is when a user hovers over any of the <a> the div with the ID showText will expand by sliding down and display the contents.

Right now when I hover over, nothing happens.

How do I achieve it?

JSFiddle: http://jsfiddle.net/mt4m2/

Issue shown here: http://youtu.be/68_kzCygYg4

Upvotes: 0

Views: 997

Answers (1)

deniskoronets
deniskoronets

Reputation: 540

There are no function content.Text, using content.text

It works, look: http://jsfiddle.net/x4My2/1/

Upvotes: 1

Related Questions