0

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

  • is there any sample example demo links? – jafar pinjar Sep 30 '19 at 7:34
  • @jafarpinjar what? – ann karsksya Sep 30 '19 at 7:35
  • what is the requirement, how it should look like? is there any demo link? – jafar pinjar Sep 30 '19 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 – ann karsksya Sep 30 '19 at 7:40
  • Is there any dev link? so that i can look into it, or its in local? – jafar pinjar Sep 30 '19 at 7:43
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

  • thanks for saving once again) – ann karsksya Sep 30 '19 at 9:04
  • slide animation for tabs? – ann karsksya Sep 30 '19 at 9:04
  • Like sliding....But need to work in jQuery – Ranganathan Sep 30 '19 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 – ann karsksya Sep 30 '19 at 9:13
  • Will try and let you know later...I'm little busy with my task – Ranganathan Sep 30 '19 at 9:20

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.