You’ve got a bunch of paragraph tags in your script.
It looks like this:
<p><script>
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};</p>
<p>/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}</p>
<p>// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {</p>
<p> var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script></p>
whereas it should look like this:
<script type="text/javascript">
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Make sure you use a text-only editor like Notepad or Gedit when you write code so extra stuff doesn’t get put in there. : )
Thread Starter
Hiro
(@mikami47)
Thanks linux4me2 for the quick response and suggestions. I use the wordpress template (Text tab) to edit the pages, since it’s easier. Do you recommend against it?
Also, I realized I didn’t include the correct link to JS Fiddle. Here is what it’s suppose to do: https://jsfiddle.net/mikami47/nbyv3214/1/
Simple HTML and CSS on my website doesn’t appear to work correctly. Yet, if I test the code on w3 school or jsdiffle, the CSS works fine.
Thanks,
HM
You should be putting your CSS and javascript in separate files, so the Text tab of the editor would not be involved.
When I test the menus on your site, the “Meet the Doctors” and “Reviews” menus appear to be the only ones with drop-downs, and they’re opening (showing the drop-down menu items) on hover based on the Superfish javascript the site is loading. When you don’t have any visual indicators to show that the parent menu items have child menus, that’s probably the best behavior to use.
Are you wanting the menus to drop down only when the user clicks the parent menu item?
Thread Starter
Hiro
(@mikami47)
Thank you linux4me2 for your awesome response and insight. I took your advice with typing the code on notepad and it removed all the <p> tags you mentioned. I’m able to have the drop down work on a button, not nav menu. Now, I just need to clean up the button and the format.
If I use CSS and Javascript on the Text editor, I now know I need to type it on notepad first and then paste in. I realize the best practice is to have a separate file for CSS and JS, but I’m not as tech savy as most web designers. I guess I’m just using duct tape and glue to design. I’ll have to read up on CSS concepts soon.
Thanks for all your help and I would have never figured out this issue if it wasn’t for your insight. Keep up the great work!! WOOT!
Warm Regards,
HM
I’m glad I was able to help. There is definitely a learning curve to this, but you’ll find that the more you learn, the easier it gets to pick up more.
You may find the Codex articles about child themes and enqueueing scripts helpful for adding the CSS and JS in the WordPress way.
