We are using below 2 parts of code in view.phtml to display result in product view page.

now Part 2 [ Features ] result is displaying below Part1 [ Product Description ]. I want to display these 2 parts as tabs in view page, so that if we click on particular tab, that part should open.

enter image description here

Part 1


<h1>Product Description </h1>
<?php echo $_product->getDescription();?>


<h1>Product Size & Space <span class="hidden-sku"><?php echo $_product->getSku();?></span> </h1>
<?php echo $attribute_value = $_product->getData('size_space');?>


Part 2


<?php echo $attribute_value = $_product->getData('interior_exterior');?>

  • Summing up, you need a tab system correct?
    – user41363
    Commented Jul 4, 2016 at 11:19
  • you are right @Paul Commented Jul 4, 2016 at 11:19
  • Do you use jQuery @BabyinMagento?
    – user41363
    Commented Jul 4, 2016 at 11:25
  • @Paul i did't used any jquey code until now for this feature. Commented Jul 4, 2016 at 11:26
  • Check my answer below @BabyinMagento
    – user41363
    Commented Jul 4, 2016 at 11:39

1 Answer 1


Here is the code you need, replace the tabs content with what you need and style however you want.

Sample: JSFiddle

VIEW CODE HERE or in JSFiddle above

Let me know if this worked fine for you! I've tested it.

  • first tab working fine, second tab is not displaying any information. Commented Jul 4, 2016 at 12:03
  • when i used jsfiddle code, it worked fine. Thanks a lot.... Commented Jul 4, 2016 at 12:34
  • @BabyinMagento you welcome, glad I could help!
    – user41363
    Commented Jul 4, 2016 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.