{"id":4994,"date":"2025-08-09T05:44:27","date_gmt":"2025-08-09T05:44:27","guid":{"rendered":"https:\/\/raybarmotorcycles.creativebuffs.com\/compare-motorcycles\/"},"modified":"2025-08-09T07:48:39","modified_gmt":"2025-08-09T07:48:39","slug":"compare-motorcycles","status":"publish","type":"page","link":"https:\/\/raybarmotorcycles.com\/en\/compare-motorcycles\/","title":{"rendered":"Compare Motorcycles"},"content":{"rendered":"<p><code data-start=\"221\" data-end=\"243\">    <div class=\"container my-5\">\n        <h2 class=\"text-center text-danger\">COMPARE MOTORCYCLES<\/h2>\n        <hr style=\"width:60px; border-top:3px solid red; margin:auto;\">\n\n        <div class=\"row mt-4 align-items-center\">\n            <div class=\"col-md-4 mb-2\">\n                <select id=\"bike1\" class=\"form-control\">\n                    <option value=\"\">SELECT THE MOTORCYCLE<\/option>\n                                            <option value=\"5007\">150B<\/option>\n                                            <option value=\"4996\">Drifter 250<\/option>\n                                    <\/select>\n            <\/div>\n            <div class=\"col-md-4 mb-2\">\n                <select id=\"bike2\" class=\"form-control\">\n                    <option value=\"\">SELECT THE MOTORCYCLE<\/option>\n                                            <option value=\"5007\">150B<\/option>\n                                            <option value=\"4996\">Drifter 250<\/option>\n                                    <\/select>\n            <\/div>\n            <div class=\"col-md-4 mb-2\">\n                <button id=\"addBike\" class=\"btn btn-dark w-100\">+ Add motorcycle<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"accordion mt-4\" id=\"compareAccordion\">\n                            <div class=\"card\">\n                    <div class=\"card-header\" id=\"heading1\">\n                        <h2 class=\"mb-0\">\n                            <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse1\">\n                                Engine                            <\/button>\n                        <\/h2>\n                    <\/div>\n                    <div id=\"collapse1\" class=\"collapse\" data-parent=\"#compareAccordion\">\n                        <div class=\"card-body compare-section\" data-field=\"engine\">\n                            <!-- Data loads dynamically -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"card\">\n                    <div class=\"card-header\" id=\"heading2\">\n                        <h2 class=\"mb-0\">\n                            <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse2\">\n                                Brakes                            <\/button>\n                        <\/h2>\n                    <\/div>\n                    <div id=\"collapse2\" class=\"collapse\" data-parent=\"#compareAccordion\">\n                        <div class=\"card-body compare-section\" data-field=\"brakes\">\n                            <!-- Data loads dynamically -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"card\">\n                    <div class=\"card-header\" id=\"heading3\">\n                        <h2 class=\"mb-0\">\n                            <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse3\">\n                                Transmission and Chassis                            <\/button>\n                        <\/h2>\n                    <\/div>\n                    <div id=\"collapse3\" class=\"collapse\" data-parent=\"#compareAccordion\">\n                        <div class=\"card-body compare-section\" data-field=\"transmission_chassis\">\n                            <!-- Data loads dynamically -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"card\">\n                    <div class=\"card-header\" id=\"heading4\">\n                        <h2 class=\"mb-0\">\n                            <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse4\">\n                                Tires and Tires                            <\/button>\n                        <\/h2>\n                    <\/div>\n                    <div id=\"collapse4\" class=\"collapse\" data-parent=\"#compareAccordion\">\n                        <div class=\"card-body compare-section\" data-field=\"tires\">\n                            <!-- Data loads dynamically -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"card\">\n                    <div class=\"card-header\" id=\"heading5\">\n                        <h2 class=\"mb-0\">\n                            <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse5\">\n                                Electrical\/Control System                            <\/button>\n                        <\/h2>\n                    <\/div>\n                    <div id=\"collapse5\" class=\"collapse\" data-parent=\"#compareAccordion\">\n                        <div class=\"card-body compare-section\" data-field=\"electrical\">\n                            <!-- Data loads dynamically -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n                            <div class=\"card\">\n                    <div class=\"card-header\" id=\"heading6\">\n                        <h2 class=\"mb-0\">\n                            <button class=\"btn btn-link btn-block text-left\" type=\"button\" data-toggle=\"collapse\" data-target=\"#collapse6\">\n                                Dimensions                            <\/button>\n                        <\/h2>\n                    <\/div>\n                    <div id=\"collapse6\" class=\"collapse\" data-parent=\"#compareAccordion\">\n                        <div class=\"card-body compare-section\" data-field=\"dimensions\">\n                            <!-- Data loads dynamically -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n                    <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function(){\n        function loadSpecs() {\n            let bike1 = document.getElementById('bike1').value;\n            let bike2 = document.getElementById('bike2').value;\n            let ids = [bike1,bike2].filter(Boolean).join(',');\n\n            document.querySelectorAll('.compare-section').forEach(function(section){\n                let field = section.dataset.field;\n                if(!ids) {\n                    section.innerHTML = '';\n                    return;\n                }\n                fetch(window.location.origin + '\/wp-json\/wp\/v2\/motorcycles?include=' + ids)\n                .then(res => res.json())\n                .then(data => {\n                    section.innerHTML = '';\n                    data.forEach(bike => {\n                        let val = (bike.acf && bike.acf[field]) ? bike.acf[field] : 'N\/A';\n                        section.innerHTML += `<div style=\"padding:8px 0; border-bottom:1px solid #eee;\"><strong style=\"display:block;\">${bike.title.rendered}<\/strong>${val}<\/div>`;\n                    });\n                })\n                .catch(err => {\n                    section.innerHTML = 'Error loading data.';\n                });\n            });\n        }\n\n        document.getElementById('bike1').addEventListener('change', loadSpecs);\n        document.getElementById('bike2').addEventListener('change', loadSpecs);\n\n        \/\/ \"+ Add motorcycle\" - clones the second select (simple implementation)\n        document.getElementById('addBike').addEventListener('click', function(e){\n            e.preventDefault();\n            let selects = document.querySelectorAll('select[id^=\"bike\"]');\n            if(selects.length >= 4) return; \/\/ limit to 4 bikes\n            let newId = 'bike' + (selects.length + 1);\n            let clone = selects[selects.length-1].cloneNode(true);\n            clone.id = newId;\n            clone.selectedIndex = 0;\n            clone.classList.add('mt-2');\n            selects[selects.length-1].parentNode.appendChild(clone);\n            clone.addEventListener('change', loadSpecs);\n        });\n    });\n    <\/script>\n    <\/code><\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"COMPARE MOTORCYCLES SELECT THE MOTORCYCLE 150B Drifter 250 SELECT THE MOTORCYCLE 150B Drifter 250 + Add motorcycle Engine Brakes Transmission and Chassis Tires and Tires Electrical\/Control System Dimensions","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4994","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/pages\/4994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/comments?post=4994"}],"version-history":[{"count":2,"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/pages\/4994\/revisions"}],"predecessor-version":[{"id":5017,"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/pages\/4994\/revisions\/5017"}],"wp:attachment":[{"href":"https:\/\/raybarmotorcycles.com\/en\/wp-json\/wp\/v2\/media?parent=4994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}