www.webdeveloper.com
Results 1 to 3 of 3

Thread: Show and Hide script with Jquery

  1. #1
    Join Date
    Sep 2005
    Posts
    1,635

    Show and Hide script with Jquery

    I have working code to Show/Hide content when clicked on link of particular section:
    var showText="Show content FAQ1";
    var hideText="Hide content FAQ1";

    1. How to do link on particular Title and show this description like Description1, Description2 etc.
    2. How to open some sections in advance inside Javascript?

    Working code is the following using Jquery jqueryV1.4.4:
    PHP Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >

    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <
    head>
    <
    title>Show/Hide content</title>
    <
    script type="text/javascript" src="jqueryV1.4.4.min.js"></script>
    </head>

    <body>
    <h2>Demo of the accessible show/hide code</h2>
    <script type="text/javascript">
    <!--
    $(document).ready(function() {

    var showText="Show content FAQ1";
    var hideText="Hide content FAQ1";

    $("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a>");

    $('#hide_this').hide();

    $('a#toggle_link').click(function() {

    if ($('a#toggle_link').text()==showText) {
    $('a#toggle_link').text(hideText);
    }
    else {
    $('a#toggle_link').text(showText);
    }
    $('#hide_this').toggle('fast');

    // return false so any link destination is not followed
    return false;
    });

    });
    //-->
    </script>

    <b>Title1</b>
    <div id="hide_this">
    <p>
    Description1.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>
    </div>
    <b>Title2</b>
    <div id="hide_this">
    <p>
    Description2.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor *** soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>
    </div>
    </body>

    </html> 

  2. #2
    Join Date
    Mar 2011
    Posts
    65
    Do you have to use jquery for something so relatively basic as showing/hiding elements?

    You can do it with much less code using plain javascript.

  3. #3
    Join Date
    Sep 2005
    Posts
    1,635
    I like to enhance Jquery capabilities for FAQ.
    1. How to do link on particular Title and show this description like Description1, Description2 etc.
    2. How to open some sections in advance inside Javascript?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles