Question 248379 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Want hyperlink inside jQuery accordion not to open accordion but to go to hyperlink

I have a jquery accordion – when you click the title line, the accordion drops down 4 bullets. There are links in each of the 4 bullets that open up a pop-up window. In the title line, there is also a similar link that I also want to open up a pop-up (for John Armstrong). However, I cannot get that link in the title line to open up the pop-up. Instead it opens up the accordion as if I were clicking anywhere on that title line. Thanks for any help or suggestions. Code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });
  } );
  
function showImage(ImageLocation,Height,Width)
{
   var NewWindow = window.open(ImageLocation,"_blank","toolbars=0,width=" + Width + ",height=" + Height);
       NewWindow.moveTo(300,100);
}
</script>  
  
</head>

<body>
<div id="accordion">
<h3><strong>Session III:</strong>
<span class="titlelink">Translational research and innovative technologies</span>
<em><u>Co-Chairs</u>: Xiaofeng Yang &amp; <a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/armstrong.html','730','750');">John Armstrong</a></em></h3>
<div>
<ul>
    <li><strong>Single cell RNA-Seq for inflammation research</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/shen.html','630','750');">Professor Ying H. Shen</a>, MD, PhD at Baylor College of Medicine</em></li>
</ul>
</li>
    <li><strong>Inflammation triggered tissue remodeling and novel therapeutics</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/vazquezpadron.html','730','750');">Professor Roberto Vazquez-Padron</a>, PhD, University of Miami</em></li>
</ul>
</li>
    <li><strong>Mass spectrometry based approaches to blood based marker detection for Oncology</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/mcdowell.html','730','750');">Colin McDowell</a>, PhD, Biodesix</em></li>
</ul>
</li>
    <li><strong>A.I. for Drug Development in Immune-Mediated Inflammatory Disorders</strong>
<ul class="c">
    <li><em><a class="bio" href="javascript:showImage('https://inflammationresearch.org/2023bios/armstrong.html','730','750');">John Armstrong</a>, PhD, President, JAV, LLC</em></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

”’

Tags:

2

Answers


  1. 0

    The issue you’re facing is because the click event for the link inside the <h3> title is propagating up to the parent <h3> element and activating the accordion toggle behavior. To prevent this behavior, you can stop the event propagation using jQuery’s stopPropagation() method.

    Here’s how you can achieve this:

    1. Attach an event listener to the links inside the <h3> tag.
    2. Call the stopPropagation() method on the event to prevent it from bubbling up to the parent elements.
    3. Let’s modify the <script> block to add the event listener for the links inside the <h3> tag:
    $(function() {
  $("#accordion").accordion({
    collapsible: true,
    active: false
  });

  // Stop event propagation for links inside <h3> tags
  $("#accordion h3 a.bio").on("click", function(e) {
    e.stopPropagation();
  });
});

function showImage(ImageLocation, Height, Width) {
  var NewWindow = window.open(ImageLocation, "_blank", "toolbars=0,width=" + Width + ",height=" + Height);
  NewWindow.moveTo(300, 100);
}

    By adding the e.stopPropagation(); line, we’re ensuring that when you click on the link for "John Armstrong", the click event doesn’t propagate to the parent <h3> tag, preventing the accordion from toggling. Instead, only the showImage function will be executed, opening the pop-up as expected.

    Login or Signup to reply.
  2. 0

    Edgar – Thank you so much. That worked perfectly!!
    -David

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search