How to show/hide(toggle) the div coming next after the hyperlink which contains answers of the qestion?

Question

I've following HTML code:

    <div id="body">
    <div class="container-fluid" style="padding-bottom: 50px;">
        <div class="row-fluid">
            <div class="col-sm-12" style="max-width: 768px; margin: 0 auto; margin-top: 10px; padding: 8px;">
                <div style="width: 100%; margin: 0 auto; overflow: hidden; color: #381D6E; padding-bottom: 10px;">
                    <ul style="padding: 0;">
                        <li>
                            <div class="list-div">
                                <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="66602">Remove From Favourite Question</a>
                                </div>
                                <div style="text-align: left;">Question 1.</div>
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                                <div style="width: 74%; float: left;">
                                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                </div>
                                <br/>Question :
                                <br/>
                                <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                <html>

                                    <body>
                                        <p>Current versus time and voltage versus time graph of a circuit element is shown below :
                                            <img src="http://www.example.com/upload_media/questions/original/1330939560_49.jpg">
                                            <img height="68" src="http://www.example.com/upload_media/questions/original/1330939630_49.1.jpg" width="117">
                                        </p>
                                    </body>

                                </html>
                                <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE66602</div>
                                </div> <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>

                            </div>
                            <div class="list-div">
                                <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                                <div style="width: 100%; margin-top: 8px;">
                                    <label class="radio-section" for="radio_1">
                                        <div class="radio-select">1)</div>
                                        <div class="radio-div">capacitance of 2 F</div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div class="radio-select">2)</div>
                                        <div class="radio-div">capacitance of 1 F</div>
                                    </label>
                                    <label class="radio-section" for="radio_3">
                                        <div class="radio-select">3)</div>
                                        <div class="radio-div">a voltage souice of emf 1V</div>
                                    </label>
                                    <label class="radio-section" for="radio_4">
                                        <div class="radio-select">4)</div>
                                        <div class="radio-div">
                                            <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2d685d462cd3331c46f7fac8ca3e1f6a.png" class="Wirisformula" align="middle">
                                        </div>
                                    </label>
                                    <label class="radio-section" for="radio_2">
                                        <div style="text-align: left;"><b>Correct Answer :</b>2</div>
                                    </label>
                                </div>
                            </div>
                            <li>
                                <div class="list-div">
                                    <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px; margin-top: 2px;"><a href="#" class="fav_que" id="80763">Remove From Favourite Question</a>
                                    </div>
                                    <div style="text-align: left;">Question 2.</div>
                                    <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">DIRECTION:</div>
                                    <div style="width: 74%; float: left;">
                                        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                    </div>
                                    <br/>Question :
                                    <br/>
                                    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
                                    <html>

                                        <body>
                                            <p>Derive the expression for the time period of a simple pendulum which depends on the lenght, mass, and gravitational acceleration.</p>
                                        </body>

                                    </html>
                                    <div style="width: 100%; overflow: hidden; margin-bottom: 4px; margin-top: 4px;">
                                        <div style="font-weight: 700; font-size: small; float: right; margin-right: 5px;">QUE80763</div>
                                    </div> <a href="#" style="color:#3F368B; text-decoration: underline;" class="show-ans">Show Answers</a>

                                </div>
                                <div class="list-div">
                                    <div style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                                    <div style="width: 100%; margin-top: 8px;">
                                        <label class="radio-section" for="radio_1">
                                            <div class="radio-select">1)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=b8bb97da575d595129425d5ba0cac48e.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_2">
                                            <div class="radio-select">2)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=2fa6f58b13fc7b4dbb999484c01320ca.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_3">
                                            <div class="radio-select">3)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=18d2b494bf784790e26d743900503669.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_4">
                                            <div class="radio-select">4)</div>
                                            <div class="radio-div">
                                                <img src="http://localhost/abc/pqr/web/ckeditor_3.6.1/plugins/ckeditor_wiris/integration/showimage.php?formula=4e3da7281a68c57642beb71a7fddd9d6.png" class="Wirisformula" align="middle">
                                            </div>
                                        </label>
                                        <label class="radio-section" for="radio_2">
                                            <div style="text-align: left;"><b>Correct Answer :</b>1</div>
                                        </label>
                                    </div>
                                </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div style="text-align: center;"> <a class="btn btn-default">BACK</a>

    </div>
</div>

How to hide/show(toggle) the answers for each question after clicking on Show Answers. Also when answers are shown the hyperlink should be "Hide Answers" and when the answers are hidden the hyperlink should be "Show Answers". How to achieve this using jQuery?

The jsFiddle of the above HTML is : http://jsfiddle.net/isherwood/rBCTg/

Can anyone please update the fiddle and amke the functionality workable?

Uggh. All those inline styles, and on top of Bootstrap too yet. How about a simplified fiddle? Here's a start: http://jsfiddle.net/isherwood/rBCTg/ — isherwood, Mar 28 '14 at 13:52
@isherwood:Thank you so much for your efforts in making a fiddle for me. Can you help me in my issue too? — PHPLover, Mar 28 '14 at 13:54
Sure, once you've provided a simplified demo. Clean up what I gave you, update it, and post it and your simplified HTML above. Make it easier for us. — isherwood, Mar 28 '14 at 13:56
@isherwood:I've updated my question. Simplified the HTML code. — PHPLover, Mar 28 '14 at 13:58
The fact that you have nested `HTML` tags and doctype statements says otherwise. Example code shouldn't have inline styles, either. — isherwood, Mar 28 '14 at 13:59
@isherwood:Unfortunately I can't change the structure of HTML I'm having as it is generated dynamically from Smarty template. So I've to make the thing workable with the above HTML only using jQuery. — PHPLover, Mar 28 '14 at 14:01
It's horribly invalid code. You need to fix your template first. — isherwood, Mar 28 '14 at 14:02
@isherwood:Thanks for your valuable suggestion. Can you please update jsfiddle with jQuery code which will do the functionality of toggleing answers for me. I'll manage it in my website accordingly. — PHPLover, Mar 28 '14 at 14:07
jQuery questions normally get lots of attention. Yours isn't because of what I already mentioned--gobs of inline styles and other irrelevant stuff in your HTML. Until you clean it up, if only for the demo and not your actual site, I have little ambition to help. — isherwood, Mar 28 '14 at 14:16

Pim Verlangen · Answer 1 · 2014-03-28T14:42:52.157

1

Every question has a number. Create a <span> with an id equal to the question's number. Then create an onclick for that span, in which you change the text for the span to 'Hide Answer' and show the div belonging to that question.

jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        var clickables = $('.clickable');

        $.each(clickables, function(i, clickable) {
            $(clickable).on('click', toggle);
        });

        function toggle() {
            var id = this.id;
            var span = $('#' + id);
            var answerDiv = $('#answer_' + id);
            if (answerDiv.is(':visible')) {
                span.text("Show Answer");
                answerDiv.css('display', 'none');
            } else {
                span.text("Hide Answer");
                answerDiv.css('display', 'block');
            }
        }
    });
</script>

JavaScript:

<script type="text/javascript">

    var clickables = document.getElementsByClassName("clickable");

    function toggle() {
        var id = this.id;
        var span = document.getElementById(id);
        var answerDiv = document.getElementById('answer_' + id);
        if (answerDiv.style.display === 'block') {
            span.innerHTML = 'Show Answer';
            answerDiv.style.display = 'none';
        } else {
            span.innerHTML = 'Hide Answer';
            answerDiv.style.display = 'block';
        }
    }

    for (var i = 0; i < clickables.length; i++) {
        clickables[i].addEventListener('click', toggle, false);
    }


</script>

HTML:

<span id="1" class="clickable">Show Answer</span><br/>
<div class="answer" id="answer_1" style="display:none">
    Here are the answers you may not see yet!
</div>

EDIT: To fulfill the answer to it's full needings, I added a jQuery option. Tested and worked for me. Might check this out!

edited Mar 28 '14 at 14:42

answered Mar 28 '14 at 13:56

Pim Verlangen

387
1
11

`onclick` attributes should be a last resort. A single event handler outside the HTML is a better approach. – isherwood Mar 28 '14 at 14:01
Care to elaborate why? – Pim Verlangen Mar 28 '14 at 14:03
Google 'separation of content and presentation'. It's a matter of maintainability and not repeating oneself. – isherwood Mar 28 '14 at 14:05
I see now, but what are the alternatives (first and foremost if the user does not use an external JavaScript library such as jQuery)? – Pim Verlangen Mar 28 '14 at 14:08
http://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class – isherwood Mar 28 '14 at 14:12
Ofcourse.. stupid how did I not think of that... Thanks! – Pim Verlangen Mar 28 '14 at 14:13
You're on the right track with this answer, but jQuery is available and should be used to dramatically simplify this code. – isherwood Mar 28 '14 at 14:14
I know it is (and know it's way easier using it), though I rather give answers in solely JavaScript where possible (since it shows what jQuery would do 'behind-the-scenes'). – Pim Verlangen Mar 28 '14 at 14:15
Great. Except that's not what was requested by the OP. – isherwood Mar 28 '14 at 14:17
`Can anyone please update the fiddle and amke the functionality workable?` is the question asked. I did not update the fiddle, but did give him a way to implement this functionality though. – Pim Verlangen Mar 28 '14 at 14:18
Would the edited code be more according to the 'separation of content and presentation' guidelines? – Pim Verlangen Mar 28 '14 at 14:29
I'd say so, but there's a jQuery tag up there, which makes your answer less appropriate. +1 for the effort, though. – isherwood Mar 28 '14 at 14:30
To close my answer: I added a jQuery option. – Pim Verlangen Mar 28 '14 at 14:43

score -1 · Answer 2 · answered Mar 28 '14 at 13:59

-1

You should distinguish every questions into the <span> it corresponds and then put an onClick on each one. You will be able to hide/show as you wish.

Good luck.

answered Mar 28 '14 at 13:59

hacks4life

691
5
16
38

`onclick` attributes should be a last resort. A single event handler outside the HTML is a better approach. – isherwood Mar 28 '14 at 14:00

How to show/hide(toggle) the div coming next after the hyperlink which contains answers of the qestion?

2 Answers2