jQuery stopping url click in div attached to function

Question

I've got a div set out like this

<div class="clickformore">
  <h3>Business in<br>action</h3>
  <div class="foundoutmore">
    <div class="uparrow"></div>
    <div class="underarrow">
      <p>Develop critical and problem solving skills faculties by investigating challenges faced by business leaders and to practice the skills to devise and implement practical solutions.<br><a href="http://www.ncl.ac.uk/postgraduate/modules/module/NBS8490/" target="_blank">http://www.ncl.ac.uk/postgraduate/modules/module/NBS8490/</a></p>
    </div>
  </div>
</div>

and where only the h3 is visible and everything else is hidden. jQuery which shows the found out more div which has the arrow and textbox making it look like a speech bubble.

But when a user would click on the link in the hidden div when shown it hides again, without opening the link.

$(".clickformore").click(function(e){
    e.preventDefault();
    if ($(this).find(".foundoutmore").css('display') == 'none') {
        $(".foundoutmore").css("display","none");
        $(this).find(".foundoutmore").css("display","inherit");
    } else {
        $(".foundoutmore").css("display","none");
    }
});

I've tried aiming at the link with css doing a z-index hoping it would first be clickable before the div hid to no avail, I tried to figure out a way to make the showing div not hide it again but I can't figure that out and end of a tether.

Is there a way I can make the link clickable before the div hides?

Answer 1

Use this bro ..

$(".foundoutmore").css("display","none");
$("h3").click(function(e){
    e.preventDefault();

    if($(this).next().css('display')=='none'){
        $(this).next().css("display","inherit");
    } else {
        $(".foundoutmore").css("display","none");
    }
});

DEMO