Develop Reference

Trigger .click() on a link on mobile view only

So I'm currently working on a WordPress website with a Table of Contents plugin. All the plugin do is just detect headings and add them to its contents.
What I am trying to achieve on my current website (https://staging.vladesplana.com/planning-center-vlad-test) is that when the Window is at <= 768px, it should simulate a "click" event on the [ Collapse ] anchor link so that the Contents will be hidden on mobile load and only be Expanded when on Desktop pixels (1280px, etc) load
function tocToggle2() {
if (window.innerWidth <= 768) {
document.getElementsByClassName('lwptoc_toggle_label').click();
}
}
window.onload = tocToggle2;
May I know your thoughts or the proper code for this? I mainly just build websites on Elementor and know only basic Javascript.
Tried a few things as well from my searches and on Stack to no avail.
I use Custom CSS & JS plugin to insert CSS and JS codes into my WordPress website so please, no JQueries
EDIT: Corrected some of the codes.

Oh I think I got it.
I just added [0] on this line:
document.getElementsByClassName('lwptoc_toggle_label')[0].click();
Source:
https://www.geeksforgeeks.org/click-method-not-working-and-console-returns-an-error-message-in-javascript/#:~:text=click%20is%20not%20a%20function,you%20have%20written%20a%20document.
Since it says there:
If you spelled it correctly then probably this error arises because you are not aware that document.getElementsByClassName returns an array of elements, not a single element. In order to avoid the error, you need to access a single element and then perform a click().
I checked in the console as well to check if the function is working as intended but it throws an error there.
final code:
function tocToggle2() {
if (window.innerWidth <= 768) {
document.getElementsByClassName('lwptoc_toggle_label')[0].click();
}
}

Instead of using getElementsByClassName, which will give you a list with every matching element, use querySelector, which will return the first one it finds.
The reason your code isn’t working is because you can’t trigger a click on a list of nodes.

jquery - check, if .class is present & and then automatically add .class to specific #id on one page

jquery - check, if .class is present on site or at specific #id and then add .class to specific #id
hey folks,
I know, there are many topics (30586451, 27947009, ...) regarding a similar issue, but i tried at least 15 code snippets in js and jQuery and none of them seem to work for me whereas other scripts just work fine on the same page.
I am currently coding a static site using Hugo server and no matter, what i try, i can't get a necessary .class to automatically get added to a certain #id. This should happen only if another .class is present on the current visible siteelements. The page is a one page which dynamically shows and hides content based on navigation without reloading but different anchors get pushed into the url (also tried listening to that but no avail). It is put together from .md, .toml and .html bits.
I can see the trigger class in the src code (tried in html tag and somewhere in body) and the script is as well (with older & recent jquery / before )
any ideas?
thank you!
<script type="text/javascript">
jQuery(document).ready(function() {
if($('classA').attr('id') == 'idB')
{
$('idC').addClass('classD');
}
});
</script>

You need . before class and # before ID in selectors.
You can create a single selector that searches for both class and ID: #idB.classA
jQuery(document).ready(function() {
if ($('#idB.classA').length > 0) {
$('#idC').addClass('classD');
}
});

Modify HTML Content Created by 3rd Party JS Script

I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.
I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;
Please could someone advise on how to get this working.

getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]
Example:
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;
More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName

jQuery function .prepend() don't work with wordpress nav menu item

I have a menu in Wordpress and I want to hook up Appointlet script to it. The code is here:
(function(e,t,n,r)
{
if(e)return;
t._appt=true;
var i=n.createElement(r),s=n.getElementsByTagName(r)[0];
i.async=true;i.src='//dje0x8zlxc38k.cloudfront.net/loaders/s-min.js';
s.parentNode.insertBefore(i,s)
})
(window._appt,window,document,"script")
<div data-appointlet="tfracine">
</div>
My idea is to create menu item with blank name, get its id (for example, "#menu-item-66"). Then add my code in front of it using jQuery function.prepend().
So I created custom js file, included it in the header.php file and the code inside the file was this:
$(document).ready(function(){
$( "#menu-item-66" ).prepend( "Test" );
});
I started with the word "Test" to figure out if it works.
Unfortunately, nothing happened and I have lack of skills to figure out why. Any suggestions or smarter way to do it?

The jQuery .prepend() function will prepend a jQuery element, not a string.
So, you have to create a jQuery element by doing:
var newElement = $('<p>New Element</p>');
In your case, what you could do is:
$(document).ready(function(){
$('#menu-item-66').prepend($('<p>This is a jQuery element</p>');
});
For a complete reference, check the .prepend() documentation out.

.prepend() and .prependTo() adds the specified content as the first child.
The question is bit not clear. Do you want to insert your script inside your
div ?

jQuery breaks if function does not exists

Tinymce stops working if on the same page I use the selectmenu from https://github.com/fnagel/jquery-ui
Tinymce with default configuration
and selectmenu:
$('select.flags').selectmenu();
EDIT:
The problem is that on the page with tinymce i dont load the script for the selectmenu function. Should I remove it from the js that runs all the functions or is there any way to modify it to run only if the function exists and will be able to be ran

Here is an easy way to make 'function does not exist' problems go away.
$.fn.selectmenu = $.fn.selectmenu || $.noop
$('select.jquery_smenu').selectmenu(); //do what you will
or you could do it like this:
if( $.fn.selectmenu ){
$('select.jquery_smenu').selectmenu(); //do what you will
}
for the record, function does not exist or var is not a function is a javascript problem more than a jQuery one. Hope this helps!

Is tiny working with this script added to the page, but not initialized for the selects?
You apply selectmenu to every single select on your page.
tinymce uses selects and your surely don't want to change these.
Give your selects a class like
<select class="jquery_smenu"> ....
and change your selector:
$('select.jquery_smenu').selectmenu();
I can not test if thats the reason why tiny stops working, but you should change that.