Question

Jquery code

$("a#inline").fancybox({
        'type' : 'inline',
        'hideOnContentClick': true
    });

Html code

<div class="top_wrap">
<div class="top_header">Testimonial</div>
<div class="top_text">

<?php 
if($getClientTestimonial->num_rows()>0){
    //$result = $profile->row();
    foreach ($getClientTestimonial->result()as $row){
    $clientName= $row->testimonialClientName;
    $clientTestiContent= $row->testimonialContent;
    //$length =10;
    $displaytype= substr($clientTestiContent,0,50);
?> 

<strong><?php echo $clientName;?></strong>

 <a id="inline"  href="#data"><?php print_r($displaytype) ;?></a><br>
          <div style="display:none"><div class="data" id="data"><?php echo $clientTestiContent;?></div></div>

<?php }}?>

</div>
</div>

The problem is that it display the contents of different #data … Something like it shows the contents of 1,2,3,4…. if i click on 4 it shows the content of 1 div? next if i click on 1 it shows the contents of 2 div?

content is
1 div content
2 div content
3 div content
4 div content

onclick of 4 div content display the contents of 1 div content but should display the contents of 4 div content

How to overcome this problem

Answer 1

create 4 different anchor tags and give them a class,

<a id="inline1"  href="#data1" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br>
<div style="display:none"><div class="data" id="data1"><?php echo $clientTestiContent;?></div></div>
<a id="inline2"  href="#data2" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br>
<div style="display:none"><div class="data" id="data2"><?php echo $clientTestiContent;?></div></div>
<a id="inline3"  href="#data3" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br>
<div style="display:none"><div class="data" id="data3"><?php echo $clientTestiContent;?></div></div>
<a id="inline4"  href="#data4" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br>
<div style="display:none"><div class="data" id="data4"><?php echo $clientTestiContent;?></div></div>

EDIT:

in your php code, do this:

<?php 
if($getClientTestimonial->num_rows()>0){
$i = 1;
    //$result = $profile->row();
    foreach ($getClientTestimonial->result()as $row){
    $clientName= $row->testimonialClientName;
    $clientTestiContent= $row->testimonialContent;
    //$length =10;
    $displaytype= substr($clientTestiContent,0,50);
?> 

<strong><?php echo $clientName;?></strong>

 <a id="inline<?php echo $i; ?>"  href="#data<?php echo $i; ?>" class="fancybox-anchor-tag"><?php print_r($displaytype) ;?></a><br>
          <div style="display:none"><div class="data" id="data<?php echo $i; ?>"><?php echo $clientTestiContent;?></div></div>

<?php 
$i++;
}}?>

then do this:

$('a.fancybox-anchor-tag')
    .each(
        function ( e )
        {            
            $(this).fancybox({
                'type' : 'inline',
                'hideOnContentClick': true
            });
        }
    );