jQuery toggle div with link to colorbox (lightbox)

0
votes

I have a div that toggles the visibility of the list below it. Within that main div, I have a link that opens a colorbox (jquery "lightbox" plugin) to add a new item to the list.

Of course, when I click the link, it doesn't do anything but toggle the list (like its parent). So I added the stopPropagation() to the link. It does follow the link now, but it opens in the parent window instead of in the colorbox.

How do I fix this? Thank you :)

<div class="list">
<div class="listname">
My List Name
<a href="my_link.html" class="colorbox">Add Item</a>
</div>
<div class="items">
My Items
</div>
</div>

$(".listname").toggle(
 function(){
  $(this).siblings(".items").slideDown(100);
  return false;
 },
 function(){
  $(this).siblings(".items").slideUp(100);
  return false;
 }
);

$(".listname a").click(function(e){ e.stopPropagation();  });
2
jquerytogglelightboxcolorbox

2 Answers

0
votes

Not sure exactly without knowing exactly what the lightbox trigger is but have you tried adding

event.preventDefault();

to prevent the following of the link?

$(".listname a").click(function(e){ 
    e.stopPropagation();
e.preventDefault();
});
0
votes

Ensure you have required Jquery Library before Colorbox script

<script src="/js/jquery.js" type="text/javascript">
<script>
 jQuery('a.colorbox').colorbox();
</script>