4
Contributors
3
Replies
4
Views
4 Years
Discussion Span
Last Post by Troy III
0

u can use this i try to do it for you i hope it works

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*this is the style for formation the other div */
        .format {/*this class is for the div that contents the banner for clicking*/
            width: 200px;
            height: 20px;
            background-color: black;
            text-align: center;
            color: white;
            cursor: pointer;
        }
        .top_div {/*this class is for the div that contents all the question */
            width:200px;

            margin: 20px;
        }
       /*this style is only used when you want the default to be hidden 
           comment it out you want to default to be display*/
       .con{
           height: 0px;
           overflow: hidden;
       }
    </style>
    <script>
        //this is the function that hid and show the questions 
        openCon = function () {
            if (document.getElementById("con_div").style.overflow != "hidden") {
                document.getElementById("con_div").style.overflow = "hidden";
                document.getElementById("con_div").style.height = "0px";
            }
            else {
                document.getElementById("con_div").style.overflow = "visible";
                document.getElementById("con_div").style.height = "auto";
            }
            }

    </script>
</head>
<body>
    <div id ="to_div" class ="top_div"><!-- div containing all the question-->
        <div id ="head" class ="format" onclick ="openCon(); " ><!--div containing the clicking part-->
            <p>click to show hidden content</p>
        </div><!-- End of div containing the clicking part-->
        <div id ="con_div" class="con"><!--div containing content to be hidden-->
            <p> all the text that you want it to show when the icon is clicked os let go 
                .duojhsldfje ptj lfkgndlfgndsfjsldkrjweo oejted
                jdsfdsjgore helfk;jndsgjge
                jdfsdogheorghnfh
            </p>
        </div><!-- End of div containing content to be hidden-->
    </div>
    <div><!-- End of div containing all the question-->
        <p>Other content</p>
    </div>
    <!-- By Oteng Ghana -->
</body>
</html>

Edited by otengkwaku

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.