How to hide/show the answers of a qstn on click of a respective hyperlink and how to change the text of this hyperlink dynamically using jQuery?

StackOverflow https://stackoverflow.com/questions/22726440

Question

I'm using PHP, Smarty, jQuery, etc. for my website. In my website I've a page which contains list of questions along with its available answer options and correct answer option. This page generated dynamically using "Smarty Template Engine". So this page can contain one or many questions. For understanding purpose now I'm showing only two questions here. Now the scenario is, the availabe answer options for each question are present under the title "Show Answers". Initially when page loads answer options of all questions should be hidden and heperlink text should be "Show Answers". When user clicks on "Show Answers" hyperlink of a particular question, the available answer options and correct answer options for that question should be shown to the user and the title of the hyperlink should change to "Hide Answers". Again if user clicks on hyperlink "Hide Answers" the available answer options and correct answer option for that particular question should get hide. In short I want the exactly same functionality the following jsFiddle has for the HTML I'm having: The reference fiddle link is : http://jsfiddle.net/cjramki/JCVnY/39/light/ Is there anyone who knows how to achieve this using jQuery? It would be of great help to me. Thanks for spending some of your valuable time in understanding my issue. Waiting for your fiddles and replies. My non-working jSFiddle is:http://jsfiddle.net/LbVFc/ For your reference I'm putting below the HTML code for two questions and their answers(Same as in js Fiddle I provided):

<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.entranceprime.com/upload_media/questions/original/1330939560_49.jpg"><img height="68" src="http://www.entranceprime.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/eprime/epmobile/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>   
                    <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/eprime/epmobile/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/eprime/epmobile/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/eprime/epmobile/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/eprime/epmobile/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>
                        </li>           
          </ul>                                     
                </div>
            </div>
        </div>
    </div>
</div>
Was it helpful?

Solution

Try This Code

  • Add a class opt to OPTIONS div and Answers div

    • You Can Use this Mark Up And Js

    HTML

<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.entranceprime.com/upload_media/questions/original/1330939560_49.jpg"><img height="68" src="http://www.entranceprime.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 class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                    <div class='opt' 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/eprime/epmobile/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>   
                    <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 class='opt' style="text-transform: uppercase; font-weight: 700; float: left; margin-right: 1%; width: 24%; min-width: 95px;">Options:</div>
                    <div class='opt' 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/eprime/epmobile/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/eprime/epmobile/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/eprime/epmobile/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/eprime/epmobile/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>
                        </li>           
          </ul>                                     
                </div>
            </div>
        </div>
    </div>
</div>


JS

$(document).ready(function () {

$('.opt').hide();

        $('a.show-ans').click(function (e) {
            $(this).parent().next().find('div.opt').toggle();
            if ($(this).text() == "Show Answers") {
                $(this).text('Hide Answers')
            }
            else {
                $(this).text('Show Answers')
            }
            e.preventDefault();
        });

});

    DEMO HERE

    Licensed under: CC-BY-SA with attribution
    Not affiliated with StackOverflow
    scroll top