Javascript function not working per functionality

Question

I have a following Javascript function for expand collapse of the content:

function showAns(inp){

        var hide="#hideAns"+inp;
        var show="#showAns"+inp; 
        var ansdiv ="#ans"+inp;
      $(hide).click(function(){
            $(ansdiv).hide(500);
            $(hide).hide();
            $(show).show();
        });
          $(show).click(function(){
            $(ansdiv).show(500);
            $(hide).show();
            $(show).hide();
        });
    }

This function is called from following piece of generated HTML code:

 <div class="qbox">
        <span class="qclass">Q. No.1) This is test question 112
            <img id ="showAns1" class="icons" src="img/expand.png" onclick="javascript:showAns(1)" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns1" class="icons" src="img/collapse.png" onclick="javascript:showAns(1)" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <img alt="image" class="img" src="img/sample.jpg">
        <hr />
        <span id="ans1">This is test answer 112</span>
    </div>
    <br>

    <div class="qbox">
        <span class="qclass">Q. No.2) This is test question 110
            <img id ="showAns2" class="icons" src="img/expand.png" onclick="javascript:showAns(2)" alt="show" width="20" height="20" style="float:right; cursor:pointer;">
            <img id="hideAns2" class="icons" src="img/collapse.png" onclick="javascript:showAns(2)" alt="hide" width="20" height="20" style="float:right; display:none; cursor:pointer;">
        </span>
        <hr />
        <span id="ans2">This is test answer 110</span>
    </div>
    <br>

problem here is that I have to click thrice the image first time then only expand collapse works fine. Once I click the image twice after that expand collapse works fine. I don't know what I am doing wrong, any help will be highly appreciated. Thank you.

Can you post the rendered html, there are many alternative easy ways to accomplish your needs. — Anoop Joshi P
– Anoop Joshi P, Commented Jul 11, 2014 at 10:50
As you are using jQuery. Why on earth you are using inline event handlers? And In function showAns() You are only binding events not executing them — Satpal
– Satpal, Commented Jul 11, 2014 at 10:50
And of course I am new to jQuery so my code may look stupid. — Sid
– Sid, Commented Jul 11, 2014 at 10:56
The code you posted binds events to the elements, so that when that element is clicked it will expand/collapse. You want to run that code on $(document).ready() not as an onClick event. It works the second time because after you click it the first time, it has bound the events. — serakfalcon
– serakfalcon, Commented Jul 11, 2014 at 10:59

Anoop Joshi P · Accepted Answer · 2014-07-11 11:06:39Z

1

You can simply do like this

$("[id^=ans]").hide();
$(".icons").click(function(){
    $(this).closest("span").find("img").toggle();
    $(this).closest(".qbox").find("[id^=ans]").slideToggle();
});

Fiddle

answered Jul 11, 2014 at 11:06

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2014-07-11 11:13:21Z

I would recommend you to use class selector and bind events using jQuery. Here is an example.

HTML

<div class="qbox">
    <span class="qclass">QUESTION
        <img class="show icons" src="img/expand.png" alt="show" >
        <img class="hide icons" src="img/collapse.png" alt="hide" >
    </span>
    <hr />
    <span class="ans">Answer</span>
</div>

Script

$('.qbox .show').click(function(){
    var closestQbox = $(this).closest('.qbox');
    closestQbox.find('.ans').show(500);
    closestQbox.find('.hide').show();
    $(this).hide();
});
$('.qbox .hide').click(function(){
    var closestQbox = $(this).closest('.qbox');
    closestQbox.find('.ans').hide(500);
    closestQbox.find('.show').show();
    $(this).hide();
});

A simplified version of script

$(".ans, .hide").hide();
$('.qbox .icons').click(function () {
    var closestQbox = $(this).closest('.qbox');
    closestQbox.find('.ans, .hide, .show').toggle();
});

DEMO

Bhushan Kawadkar · Accepted Answer · 2014-07-11 11:45:55Z

0

Try this code :

$(function(){
  $('.icons').click(function(){
        $(this).hide();
        $(this).siblings().show();
        $(this).closest('.qbox').find('[id^=ans]').toggle(500);
  });

});

edited Jul 11, 2014 at 11:45

answered Jul 11, 2014 at 11:00

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Collectives™ on Stack Overflow

Javascript function not working per functionality

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related