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 Jul 4 '16 at 11:19
  • you are right @Paul – Baby in Magento Jul 4 '16 at 11:19
  • Do you use jQuery @BabyinMagento? – user41363 Jul 4 '16 at 11:25
  • @Paul i did't used any jquey code until now for this feature. – Baby in Magento Jul 4 '16 at 11:26
  • Check my answer below @BabyinMagento – user41363 Jul 4 '16 at 11:39

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. – Baby in Magento Jul 4 '16 at 12:03
  • when i used jsfiddle code, it worked fine. Thanks a lot.... – Baby in Magento Jul 4 '16 at 12:34
  • @BabyinMagento you welcome, glad I could help! – user41363 Jul 4 '16 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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