Home/ Questions/Q 7835857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T13:50:24+00:00

how can i make it to work, when clicked expand it and when clicked

  • 0

how can i make it to work, when clicked expand it and when clicked again collapse it…
if it is already expand then say hide and if it is already collapse then say show.

below is the code so far.

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collapsible Message Panels</title>
        <style type="text/css">
        *
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        #content
        {
            width: 200px;
            height: 100px;
            margin: 20px auto;
            padding: 20px;
            border: 1px dotted #999999;
            overflow: hidden;
            text-align: justify;
        }

    </style>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // Hide the "view" div.
            $('one').hide();
            $('second').hide();
            // Watch for clicks on the "slide" link.
            $('div.slide').click(function () {
                // When clicked, toggle the "view" div.
                $('second').hide();
                $('one').slideToggle(400);
                return false;
            });
            $('div.slide1').click(function () {
                // When clicked, toggle the "view" div.
                $('one').hide();
                $('second').slideToggle(400);
                return false;
            });


        });
    </script>
</head>
<body>

    <div class="slide">
        <a href="#" class="slide">Disclaimer-1</a></div>
    <div class="slide1" >
        &nbsp; &nbsp; | &nbsp; &nbsp; <a href="#" class="slide1">Behavior</a></div>
    <div id="one" class="content">
       As you can see the structure, the elements of the menu are inside the div with class “menu_list”. 

    </div>
    <div id="second" class="content1">
       I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight  
    </div>
    <br />
    <br />
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hiya Here you go man workingDemo http://jsfiddle.net/gVjFs/ second the 2 links together here http://jsfiddle.net/gVjFs/3/ (using span instead of div)

    Final with toggling text here http://jsfiddle.net/KpqvE/

    2nd demo from a fancy one as mentioned in the comments above: http://jsfiddle.net/5TfJy/2/ (this demo only have 2 tabs.

    Whichever suits you best bruv. And the code will make it clear what was missed i.e. # for ids.

    Hope this helps does the beahviour you mentioned 🙂

    HTML using span instead of div http://jsfiddle.net/KpqvE/ 

    <span class="slide">
    <a href="#" class="slide">Disclaimer-1</a></span>
<span class="slide1" >
    &nbsp; &nbsp; | &nbsp; &nbsp; <a href="#" class="slide1">Behavior</a></span>
<div id="one" class="content">
   As you can see the structure, the elements of the menu are inside the div with class “menu_list”. 

</div>
<div id="second" class="content1">
   I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight  
</div>
<br />
<br />​

    Jquery (old)

      $(document).ready(function () {

        // Hide the "view" div.
        $('#one').hide();
        $('#second').hide();
        // Watch for clicks on the "slide" link.
        $('div.slide').click(function () {
            // When clicked, toggle the "view" div.
            $('#second').hide();
            $('#one').slideToggle(400);
            return false;
        });
        $('div.slide1').click(function () {
            // When clicked, toggle the "view" div.
            $('#one').hide();
            $('#second').slideToggle(400);
            return false;
        });


    });​

    Updated Jquery code

    $(document).ready(function() {

    // Hide the "view" div.
    $('#one').hide();
    $('#second').hide();
    // Watch for clicks on the "slide" link.
    $('span.slide').click(function() {
        // When clicked, toggle the "view" div.
        $('#second').hide();
        $('#one').slideToggle(400, function() {

            if ($(this).is(":visible"))
              $('span.slide > a').text('hide Disc');
            else
              $('span.slide > a').text('Disclaimer-1');

        });
        return false;
    });
    $('span.slide1').click(function() {
        // When clicked, toggle the "view" div.
        $('#one').hide();
        $('#second').slideToggle(400, function() {

            if ($(this).is(":visible"))
              $('span.slide1 > a').text('hide Behavior');
            else
              $('span.slide1 > a').text('Behavior');

        });
        return false;
    });


});​
    • 0