show/hide with html data in list using css and javascript Options

[redhuneeru]

hey everyone

I have following code an its not working as it should be can anyone help me. coding of all css, javascript and html.

I want to have answer to questions shown only when we click on + or question it self

CODE

<style type="text/css">
    .expand{
        font-size:.9em;
    }
    .question{
        margin:20px;
    }
    .question .slide_toggle{
        font-size: 1.2em;
        line-height: 1em;

    }
    .question li{
        margin:10px 0;
    }
    .question>a{
        cursor: pointer;
        font-weight:normal;
    }
    .answer{
        background-color:#EAF2F8;
        padding:20px;
        margin:20px 0;
    }
    blockquote{
        margin:10px;
    }
</style>

<script>
$(document).ready(
        function(){
            $(".question .answer").hide();

            $('.question a').click(
                function(){

                    if($(this).closest('.question').find('.answer').is(":hidden")){
                        $(this).find('.expand').text('[-]');
                        $(this).attr('style', 'font-weight:bold;');
                    }
                    else{
                        $(this).find('.expand').text('[+]');
                        $(this).attr('style', 'font-weight:normal;');
                    }

                    $(this).closest('.question').find('.answer').slideToggle();

                }
            );
            //detect hash in url to load question.
            if(window.location.hash){
                //get question id
                var question = window.location.hash;
                //highlight question
                $('body').find('div' + question + ' .answer').slideToggle();
                $('body').find('div' + question + ' .expand').text('[-]');
                $('body').find('div' + question + ' a').attr('style', 'font-weight:bold;');
            }
            //$('div' + hash + ' .answer').show();

        });

</script>

<div class="content">

         <h2>Menu</h2>
    <ul style="list-style: none;" ><br>
        <li><button><a href="#">test1</a> </button></li>
            <ul style="list-style: none;"><br>
                <li><div class="question">
                        <a class="slide_toggle">
                        <span class="expand">[+]</span>question1</a>
                        <div class="answer">
                        <p class="static">  answer of question1</p>
                        </div>
                    </div></li>
                <li>div class="question">
                        <a class="slide_toggle">
                        <span class="expand">[+]</span>question2</a>
                        <div class="answer">
                        <p class="static">  answer of question2</p>
                        </div>
                    </div></li>
                <li>div class="question">
                        <a class="slide_toggle">
                        <span class="expand">[+]</span>question3</a>
                        <div class="answer">
                        <p class="static">  answer of question3</p>
                        </div>
                    </div></li>
                </ul>
            <br>
        <li><button><a href="#">test2</a></button></li><br>
            <ul style="list-style: none;">
                <li>div class="question">
                        <a class="slide_toggle">
                        <span class="expand">[+]</span>question4</a>
                        <div class="answer">
                        <p class="static">  answer of question4</p>
                        </div>
                    </div></li>
                <li>div class="question">
                        <a class="slide_toggle">
                        <span class="expand">[+]</span>question5</a>
                        <div class="answer">
                        <p class="static">  answer of question6</p>
                        </div>
                    </div></li>
            </ul>
    </ul>
</div>

[CharlesEF]

That's jQuery, not Javascript. Well, jQuery is based on Javascript but uses a different syntax. Are you loading the jQuery library? jQuery will not function unless you load the library. Search google for the library you want to use. I don't do jQuery. Check this link.

This post has been edited by CharlesEF: Jul 4 2014, 02:37 PM