1

how to make a accordion from standard horizontal tabs as shown in the picture

I looked at how to make tabs from simple blocks using the magento 2 widget but it worked out for me to apply this to a tab products

hope you help

enter image description here

12
  • is there any sample example demo links? Sep 30, 2019 at 7:34
  • @jafarpinjar what? Sep 30, 2019 at 7:35
  • what is the requirement, how it should look like? is there any demo link? Sep 30, 2019 at 7:36
  • @jafarpinijar no :( only what is in the picture. but, it should work like this, now it’s just open blocks, but you need them to be under each other and when pressed open down like an accordion Sep 30, 2019 at 7:40
  • Is there any dev link? so that i can look into it, or its in local? Sep 30, 2019 at 7:43

1 Answer 1

1

You can achieve this by just modifying your css

.product.data.items {
    margin: 0 0 20px;
    padding: 0;
}
.product.data.items > .item.title {
    box-sizing: border-box;
    float: none;
    width: 100%;
    margin: 0 0 5px;
}
.product.data.items > .item.title > .switch {
    display: block;
}
.product.data.items > .item.content {
    box-sizing: border-box;
    display: block;
    float: none;
    margin: 0;
}
.product.data.items > .item.content::after {
    clear: both;
}
.product.data.items > .item.content.active {
    display: block;
}
.product.data.items > .item.title > .switch {
    border-color: #d1d1d1;
    border-style: solid;
    border-width: 1px;
}
.item.content[aria-hidden="true"] {
    display: none;
}

.product.data.items > .item.content {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d1d1d1;
    margin: 0 0 5px;
    padding: 20px;
}
.product.data.items > .item.active.title{
    margin-bottom: 0px;
}

If you want sliding animation, let me know

5
  • thanks for saving once again) Sep 30, 2019 at 9:04
  • slide animation for tabs? Sep 30, 2019 at 9:04
  • Like sliding....But need to work in jQuery Sep 30, 2019 at 9:05
  • if it’s not difficult for you to give an example of smooth animation for opening tabs, then I will be very grateful Sep 30, 2019 at 9:13
  • Will try and let you know later...I'm little busy with my task Sep 30, 2019 at 9:20

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.