{"id":22218,"date":"2024-06-13T05:38:33","date_gmt":"2024-06-13T05:38:33","guid":{"rendered":"https:\/\/anytimevidya.com\/vidya\/?page_id=22218"},"modified":"2024-06-13T06:03:37","modified_gmt":"2024-06-13T06:03:37","slug":"button-click","status":"publish","type":"page","link":"https:\/\/anytimevidya.com\/index.php\/button-click\/","title":{"rendered":"button-click"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22218\" class=\"elementor elementor-22218\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23541fb e-flex e-con-boxed e-con e-parent\" data-id=\"23541fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-0a4d470 e-con-full e-flex e-con e-child\" data-id=\"0a4d470\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b5cf9a elementor-widget elementor-widget-button\" data-id=\"8b5cf9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\" id=\"btn1\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19b4c66 e-con-full e-flex e-con e-child\" data-id=\"19b4c66\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1036d7a elementor-widget elementor-widget-button\" data-id=\"1036d7a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\" id=\"btn2\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0da4f23 e-con-full e-flex e-con e-child\" data-id=\"0da4f23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c1234a elementor-widget elementor-widget-button\" data-id=\"5c1234a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\" id=\"btn3\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Click here<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8906c60 elementor-widget elementor-widget-html\" data-id=\"8906c60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script> \r\n    \/\/ replace with your button IDs \r\n    var btn1 = document.getElementById(\"btn1\"); \r\n    var btn2 = document.getElementById(\"btn2\"); \r\n    var btn3 = document.getElementById(\"btn3\"); \r\n     \/\/Click Event Handlers for buttons \r\n    btn1.onclick = function(event){ \r\n        event.preventDefault(); \r\n        toggleDivs(\"sect1\"); \r\n    }; \r\n    btn2.onclick = function(event){ \r\n        event.preventDefault(); \r\n        toggleDivs(\"sect2\"); \r\n    }; \r\n    btn3.onclick = function(event){ \r\n        event.preventDefault(); \r\n        toggleDivs(\"sect3\"); \r\n    }; \r\n    \/\/function to hide or show \r\n    function toggleDivs(s){ \r\n    \/\/reset\r\n    document.getElementById(\"sect1\").classList.remove(\"shown\"); \r\n    document.getElementById(\"sect2\").classList.remove(\"shown\"); \r\n    document.getElementById(\"sect3\").classList.remove(\"shown\"); \r\n    document.getElementById(s).classList.add(\"shown\"); \r\n} \r\nbtn1.focus(); \/\/force first button to focus\r\nbtn1.click(); \/\/force first button to click\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3d0d8db e-flex e-con-boxed e-con e-parent\" data-id=\"3d0d8db\" data-element_type=\"container\" data-e-type=\"container\" id=\"sec1\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef06974 hidden elementor-widget elementor-widget-image\" data-id=\"ef06974\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"sec1\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"350\" height=\"350\" src=\"https:\/\/anytimevidya.com\/wp-content\/uploads\/2023\/09\/banner-1-mg2-market.jpg\" class=\"attachment-large size-large wp-image-21833\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a22c480 e-flex e-con-boxed e-con e-parent\" data-id=\"a22c480\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-24dc3fd hidden elementor-widget elementor-widget-image\" data-id=\"24dc3fd\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"sec2\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"350\" height=\"350\" src=\"https:\/\/anytimevidya.com\/wp-content\/uploads\/2023\/09\/banner-2-mg2-market.jpg\" class=\"attachment-large size-large wp-image-21834\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ba4c47 e-flex e-con-boxed e-con e-parent\" data-id=\"9ba4c47\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-818f9b3 hidden elementor-widget elementor-widget-image\" data-id=\"818f9b3\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"sec3\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"580\" height=\"350\" src=\"https:\/\/anytimevidya.com\/wp-content\/uploads\/2023\/09\/banner-3-mg1-market.jpg\" class=\"attachment-large size-large wp-image-21830\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f944149 e-flex e-con-boxed e-con e-parent\" data-id=\"f944149\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f67802 elementor-widget elementor-widget-html\" data-id=\"6f67802\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script>\r\nvar divs\r\nvar btn1 = document.getElementById(\"btn1\");\r\nvar btn2 = document.getElementById(\"btn2\");\r\nvar btn3 = document.getElementById(\"btn3\");\r\nbtn1.onclick = function(event){\r\nevent.preventDefault();\r\ntoggleDivs(\"sect1\",this);\r\n};\r\nbtn2.onclick = function(event){\r\nevent.preventDefault();\r\ntoggleDivs(\"sect2\",this);\r\n};\r\nbtn3.onclick = function(event){\r\nevent.preventDefault();\r\ntoggleDivs(\"sect3\",this);\r\n};\r\nfunction toggleDivs(s,btn){\r\nif(btn.classList.contains(\"btn_active_state\")){\r\ndocument.getElementById(s).classList.remove(\"shown\");\r\nbtn.classList.remove(\"btn_active_state\");\r\ndocument.getElementById(s).classList.remove(\"shown\");\r\nreturn;\r\n}else{\r\nbtn1.classList.remove(\"btn_active_state\");\r\nbtn2.classList.remove(\"btn_active_state\");\r\nbtn3.classList.remove(\"btn_active_state\");\r\nbtn.classList.add(\"btn_active_state\");\r\ndocument.getElementById(\"sect1\").classList.remove(\"shown\");\r\ndocument.getElementById(\"sect2\").classList.remove(\"shown\");\r\ndocument.getElementById(\"sect3\").classList.remove(\"shown\");\r\ndocument.getElementById(s).classList.add(\"shown\",\"fade\");\r\n}\r\n}\r\n\/\/force button1 state initialise, if required\r\n\/\/btn1.focus();\r\n\/\/btn1.click();\r\n<\/script>\r\n<style>\r\n.elementor-editor-active .hidden{\r\ndisplay:block;\r\n}\r\n.hidden{\r\ndisplay:none;\r\n}\r\n.shown{\r\ndisplay: block !important;\r\nanimation: fade_in_anim 0.5s;\r\n}\r\n.btn_active_state{\r\nbackground-color: #FFCC00 !important;\r\n}\r\n@keyframes fade_in_anim {\r\n0% {\r\nopacity: 0;\r\ntransform: translateY(-30px);\r\n}\r\n100% {\r\nopacity: 1;\r\ntransform: translateY(0px);\r\n}\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7dda09 hidden e-flex e-con-boxed e-con e-child\" data-id=\"a7dda09\" data-element_type=\"container\" data-e-type=\"container\" id=\"sec1\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0015476 elementor-widget elementor-widget-image\" data-id=\"0015476\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/anytimevidya.com\/wp-content\/uploads\/2023\/08\/modern-blog-11.jpg\" class=\"attachment-large size-large wp-image-21794\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-311003f hidden e-flex e-con-boxed e-con e-child\" data-id=\"311003f\" data-element_type=\"container\" data-e-type=\"container\" id=\"sec2\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55f696f elementor-widget elementor-widget-image\" data-id=\"55f696f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"350\" height=\"350\" src=\"https:\/\/anytimevidya.com\/wp-content\/uploads\/2023\/09\/banner-2-mg2-market.jpg\" class=\"attachment-large size-large wp-image-21834\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6c8e6df hidden e-flex e-con-boxed e-con e-child\" data-id=\"6c8e6df\" data-element_type=\"container\" data-e-type=\"container\" id=\"sec3\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ac2d8fd elementor-widget elementor-widget-image\" data-id=\"ac2d8fd\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"sec1\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"350\" height=\"350\" src=\"https:\/\/anytimevidya.com\/wp-content\/uploads\/2023\/09\/banner-1-mg2-market.jpg\" class=\"attachment-large size-large wp-image-21833\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b9fd6a e-flex e-con-boxed e-con e-parent\" data-id=\"9b9fd6a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Click here Click here Click here<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22218","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/pages\/22218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/comments?post=22218"}],"version-history":[{"count":52,"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/pages\/22218\/revisions"}],"predecessor-version":[{"id":22271,"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/pages\/22218\/revisions\/22271"}],"wp:attachment":[{"href":"https:\/\/anytimevidya.com\/index.php\/wp-json\/wp\/v2\/media?parent=22218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}