Question

i have 2 divs inside foreach loop .first div has information about a company but shortened form and in second div has full form of information about a company . i want to hide first div and show second div when ‘show more ‘ link of that company has clicked .in my code when i click ‘show more ‘ link and it shows all company not only the company which i clicked .

<?php   
  $X         = 0;
  foreach($companyRows as $row){ ?>
  <div class="first" >
        echo "a company information shortend form"
      </div>
      <div class="second" style="display:none">
       echo "a company information full form"
       </div>
       <a class="show_details"> show more</a>                               
  <?php $X++;
  } ?>

and here is jQuery . i am new in jquery and php.

<script type="text/javascript">
    $(document).ready(function(){
        $(".show_details").click(function(){
            $(".second").show();
            $(".first").hide();
        });
    });
</script>

and want to change show more link to show less.

Answer 1

add a parent <div> in your loop… so that all this html stay inside a parent div.. this way we can use parent()..

<?php   
  $X         = 0;
   foreach($companyRows as $row){ ?>
   <div class="parentDiv"> //***here****
    <div class="first" >
      echo "a company information shortend form"
    </div>
     <div class="second" style="display:none">
       echo "a company information full form"
     </div>
     <a class="show_details show_more"> show more</a>    //updated 
 </div>                           
<?php $X++;
} ?>

JQUERY
*UPDATED*

$(document).ready(function(){
    $(".show_details").click(function(){
        var $this=$(this);
        var $parent= $this.parent();
        if($this.hasClass('show_more')){
            $this.removeClass('show_more').addClass('show_less');

            $parent.find('.second').show(); //find parent div and div with second class inside that parent div
           $parent.find(".first").hide();
           $this.html('show Less');  // $(this).text('show Less');
        }else if($this.hasClass('show_less')){
            $this.removeClass('show_less').addClass('show_more');

            $parent.find('.second').hide(); //find parent div and div with second class inside that parent div
           $parent.find(".first").show();
           $this.html('show More');  // $(this).text('show Less'); 
        } 
    });
});    

html().. to replace the text inside the clicked link or u can use text()