{"id":24894,"date":"2022-12-06T15:29:40","date_gmt":"2022-12-06T09:59:40","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/"},"modified":"2022-12-06T15:29:40","modified_gmt":"2022-12-06T09:59:40","slug":"solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/","title":{"rendered":"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property.<\/p>\n

Max-height is not required here and messes with the css transition.<\/p>\n

And the second transition property is not needed as it is already defined.<\/p>\n

.dropdown-content-container {\n  overflow-y: hidden;\n  height: 0;\n  transition: all 1.50s;\n}\n\n.btn-dropdown.open>.dropdown-content-container {\n  height: 500px;\n}\n<\/code><\/pre>\n
For your second problem of changing the name, well you must put the text you want to change into an element so you can access it directly and only change that label and not all of the element (including the container).<\/p>\n
So first we need to change the HTML code (I used span but it doesn’t matter)<\/p>\n
<div class=\"btn-dropdown\">\n    <span class=\"dropdown-content-label\">Show \u25bc<\/span>\n    <div class=\"dropdown-content-container\">\n        <!--Banner-->\n    <\/div>\n<\/div>\n<\/code><\/pre>\n
and then we need to slightly adjust the JS code to fit this HTML adjustment by getting the label and not the whole dropdown element.<\/p>\n
const btns = document.querySelectorAll('.btn-dropdown')\n\nbtns.forEach(btn => {\n    btn.addEventListener('click', function(e) {\n        const initialText = \"Show \u25bc\"\n        const label = btn.querySelector(\".dropdown-content-label\");\n        if (label.textContent.toLowerCase() === initialText.toLowerCase()) {\n            label.textContent=\"Hide \u25b2\";\n        } else {\n            label.textContent = initialText;\n        }  \n        btn.classList.toggle('open');\n    });\n})\n<\/code><\/pre>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            1<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Changing the behavior of an element in dropdown div (banner) opening smoothly <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property. Max-height is not required here and messes with the css transition. And the second transition property is not needed as it is already defined. .dropdown-content-container { overflow-y: hidden; height: 0; transition: all … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333],"class_list":["post-24894","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript"],"yoast_head":"\n[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property. Max-height is not required here and messes with the css transition. And the second transition property is not needed as it is already defined. .dropdown-content-container { overflow-y: hidden; height: 0; transition: all ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-06T09:59:40+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly\",\"datePublished\":\"2022-12-06T09:59:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/\"},\"wordCount\":157,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/\",\"name\":\"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-12-06T09:59:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly - JassWeb","og_description":"[ad_1] For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property. Max-height is not required here and messes with the css transition. And the second transition property is not needed as it is already defined. .dropdown-content-container { overflow-y: hidden; height: 0; transition: all ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/","og_site_name":"JassWeb","article_published_time":"2022-12-06T09:59:40+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly","datePublished":"2022-12-06T09:59:40+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/"},"wordCount":157,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/","url":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/","name":"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-06T09:59:40+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-changing-the-behavior-of-an-element-in-dropdown-div-banner-opening-smoothly\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Changing the behavior of an element in dropdown div (banner) opening smoothly"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/24894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=24894"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/24894\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=24894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=24894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=24894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}