CodingForums.com - View Single Post - FAQ Drop-Down A when Q is clicked?

webdev1958 · 08-28-2011, 01:35 AM

Quote:

Originally Posted by Squishy435

For example: https://www.facebook.com/help/?page=1145

Facebook has something like that available.

This has the up/down arrows functionality like on Fb.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            ul {
                list-style-type: none
            }
            .more_content {
                margin: 10px 0px 0px 50px;
                padding: 5px 5px 5px 5px;
                width: 200px;
                height: 100px;
                border: 1px solid black;
                overflow: auto;
                display: none
            }
            span {
                padding: 0px 0px 0px 50px;
            }
            span:hover {
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            function showHideMore(obj) {
                var contObj = obj.parentNode.getElementsByTagName('div')[0];
                var status = (contObj.style.display == 'block')? 'none' : 'block'
                contObj.style.display = status;
                obj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
                obj.curPic = (obj.curPic == 0)? 1 : 0;
                obj.style.backgroundImage = 'url("'+plusMinusPics[obj.curPic]+'")';
            }
            window.onload=function(){
                plusMinusPics = ['plus.png','minus.png'];
                oMoreLessSpans = document.getElementById('list1').getElementsByTagName('span');
                for(i=0; i < oMoreLessSpans.length; i++){
                    oMoreLessSpans[i].curPic = 0;
                    oMoreLessSpans[i].style.background = 'url("'+plusMinusPics[oMoreLessSpans[i].curPic]+'") no-repeat 0 50%';
                    oMoreLessSpans[i].onclick=function(){showHideMore(this);}
                }
            }
        </script>
    </head>
    <body>
        <div>
            <ul id="list1">
                <li>
                    <div>
                        <span>Show more</span>
                        <div class="more_content">More 1 content</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>Show more</span>
                        <div class="more_content">More 2 content</div>
                    </div>
                </li>
                <li>
                    <div>
                        <span>Show more</span>
                        <div class="more_content">More 3 content</div>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>