I want to make a like this example. Cliking at any question it shows the whole, and clicking for the second time it hides. I want this effect.


Is there any code snippets for that. I need the code. WHAT IS THE NAME OF THIS EFFECT?



Recommended Answers

All 3 Replies

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">
    <meta charset="utf-8" />
        /*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 */

            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*/
           height: 0px;
           overflow: hidden;
        //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";

    <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
        </div><!-- End of div containing content to be hidden-->
    <div><!-- End of div containing all the question-->
        <p>Other content</p>
    <!-- By Oteng Ghana -->
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.