Question

I am trying to load a specific sibling for each div using fancybox.

E.g:

<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>

I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?

Answer 1

You can use below code:

$(function(){
   $("div.pop-ups span").click(function(){
      $.fancybox({ content: $(this).parent().next().html() });
   });
});

This will show the content of relevant div in fancybox.