Question

I have a set of elements, each of which looks like this:

<div class="maindiv">
  <div id="55">
    <a class="aimg" onclick="showit(this);return false;">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit"></div>
  </div>
 </div>

class “getit” has display set to “none”. I need the “onclick=show” function to put the display of that “getit” classed div to “block”.

I’ve tried the following inside the “showit()” function:

$(this).parent().find('.getit:first').css('display', 'block');

but it doesnt work…

I hope someone here can help me!

Answer 1

Remove the onclick handler, as inline javascript usually is’nt the best solution, and prevent the default action in the click handler instead.

<div class="maindiv">
  <div id="55">
    <a class="aimg">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit">dsdadsa</div>
  </div>
</div>​​​

Then just find the sibling with the right class and show it.

$(".aimg")​.on('click', function(e) {
    e.preventDefault();
    $(this).siblings(".getit").show();
})​;​

FIDDLE

Or if you just have to have the onclick function (which is uneccessary) :

<div class="maindiv">
  <div id="55">
    <a class="aimg" onclick="showit(this);return false;">
      <img src="myjpg.jpg"/>
    </a>
    <div class="someclass"></div>
    <div class="getit">dsdadsa</div>
  </div>
 </div>

​<script type="text/javascript"​​​​​​​​​​​​​​​​​​​​​​​​​​>
    function showit(elem) {
        $(elem).siblings(".getit").show();
    }
</script>