Dynamic content view using fancybox

Question

I need to view the dynamic content in fancybox

my code looks like

<a id="featureExpertPopup" href="#featureExpertPop">View Profile </a>
<a id="featureExpertPopup" href="#featureExpertPop">View Profile </a>
<a id="featureExpertPopup" href="#featureExpertPop">View Profile </a>

and fancy box content

<div style="display: none;">
    <div id="featureExpertPop" style="overflow:auto;">Dynamic Profile</div>
</div>

fancybox call

$("#featureExpertPopup").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'

    });

Now the problem is popup opening for first anchor link only, i want to open popup for each link with different content (from database)based on profile id.

Answer 1

You can't use same ID for different elements. Use class instead of ID

<a class="featureExpertPopup" href="#featureExpertPop">View Profile </a>
<a class="featureExpertPopup" href="#featureExpertPop">View Profile </a>
<a class="featureExpertPopup" href="#featureExpertPop">View Profile </a>


$(".featureExpertPopup").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'

    });