How to display product descriptions automatically in mobile version?

Question

We are using 1.9.0.1, the rwd theme.

By default, you need to click "Description" when viewing a product on your phone, and then the description will drop down and show.

I feel like a lot of customers glance over this, and I would like the description to load automatically.

Is there a way to do this?

Thanks

Answer 1

Open your styles.css and apply the following style

@media (max-width: 770px)
{
  .product-collateral > dl > dd {
    display: block !important;
  }
}

Answer 2

edit: Should point out this was written with v1.9.1.0 in mind. There were various modifications to the RWD theme since 1.9.0.1 so the solution may need adapting.

The accepted solution will end up opening all the tabs in the mobile view. OP mentioned only the description.

To make the first tab start open the answer lies within in skin/frontend/rwd/default/app.js which handles, amongst various other things, the behaviour of the tabs in the product view.

Investigate the block of code starting at line 872, "UI Pattern - Toggle Content (tabs and accordions in one setup)", specifically lines 938-941:

//Open the first accordion if desired.
if (startOpen) {
    dts.eq(0).trigger('click');
}

startopen determines whether the first tab is triggered. Where is startopen defined? Line 881:

var startOpen = wrapper.hasClass('open');

The wrapper in this case is the .toggle-content div. It does not, by default, have the class open - you'll have to add that yourself in your copy of <template-dir>/catalog/product/view.phtml line 175:

<div class="product-collateral toggle-content tabs">

to...

<div class="product-collateral toggle-content tabs open">

That's all there is to it.

Answer 3

I faced the same problem in magento 1.9.2.1 and i fixed it by just adding a css class to main div of the accordion.

If you open the file template/catalog/product/view.phtml and at bottom of the file you will find html like below:

<div class="product-collateral toggle-content tabs">

Just change add accordion-open css class. So the hmlt will be like

 <div class="product-collateral toggle-content tabs accordion-open">

In my version of magento, it adds the current css class to first accordion tab, so the above changes will make the first tab to be open automatically.

Hope it will help.