Develop Reference

Divi - Slide Navigation On Button Optimisation

I have a slide navigation script that allows me to navigate to a particular slide using an "nth-child(#) that triggers a click event.
Each button currently has its own slide reference, i.e Slide-1 button will link to nth-child(1) and so forth through to slide/button 8
I am looking for ways to optimise the below script using a loop or something similar so that it is more manageable and still keeps the same functionality.
<script>
jQuery(document).ready(function( $ ) {
var selector = '.activelinks a';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
$("#Slide-1").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(1)").trigger("click");
});
$("#Slide-2").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(2)").trigger("click");
});
$("#Slide-3").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(3)").trigger("click");
});
$("#Slide-4").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(4)").trigger("click");
});
$("#Slide-5").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(5)").trigger("click");
});
$("#Slide-6").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(6)").trigger("click");
});
$("#Slide-7").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(7)").trigger("click");
});
$("#Slide-8").on("click", function(e) {
e.preventDefault();
$(".et-pb-controllers a:nth-child(8)").trigger("click");
});
});
</script>

you can give a class to all slide buttons like : slideBtn
then :
jQuery(document).ready(function ($) {
var selector = ".activelinks a";
$(selector).on("click", function () {
$(selector).removeClass("active");
$(this).addClass("active");
});
$(".slideBtn").on("click", function (e) {
e.preventDefault();
var slideNumber = e.target.id.replace( /^\D+/g, '');
$(".et-pb-controllers a:nth-child("+slideNumber+")").trigger("click");
});
});

responsive submenu open on click not working

I have converted my first HTML to WordPress website and have a responsive sub menu which is not opening properly on mobile because obviously there is no hover functionality. I have looked up solutions and have come to nothing as my JavaScript knowledge is non existent therefore copying and pasting code from examples on here is not getting me the result I want to achieve.
The menu I am trying to fix is on the following website:
https://www.piogroup.in/wordpress/
I have 2 parents which are "about" and "products" and they are not clickable links. So far I have tried the following code:
$(document).ready(function(){
$("#menu-item-74").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
$(document).ready(function(){
$("#menu-item-72").off("click").on("click", function() {
$(".sub-menu").fadeToggle("slow");
});
})
and then added this as well:
var $handle = $('.sub-menu').prev();
var opened = 0;
$handle.on('click', function(e){
if (opened) {
window.location.href = $(this).attr('href');
} else {
e.preventDefault();
e.stopPropagation();
$('.sub-menu').slideToggle();
opened = 1;
}
});
$('html').on('click', function(){
if (opened) {
$('.sub-menu').slideToggle();
opened = 0;
}
});
I am not sure if I am meant to put up any other files but can do so.

#R Alexander if I understand you correctly, Your sub menu is not working on mobile devices. Below code may be help you out.
minWidth = $(window).width();
if(winWidth < 768){
$(".menu-main-menu-container li").click(function(){
$(".menu-main-menu-container li ul").slideToggle();
$(".menu-main-menu-container li ul").parent().siblings().children(".menu-main-menu-container li ul").slideUp();
});
}

I went through your code and there are some logical inconsistencies.
First of all you should change this as follows:
var $handle = $('.sub-menu').prev();
var opened = 0;
$handle.on('click', function(e) {
if (opened) {
window.location.href = $(this).attr('href');
} else {
e.preventDefault();
e.stopPropagation();
$(this).next().slideToggle();
opened = 1;
}
});
This makes the particular clicked element to slideToggle instead of all the .sub-menu elements.
Then to emulate the closing of the drop downs use this:
$('html').on('click', function() {
if (opened) {
$('.sub-menu').slideUp();
opened = 0;
}
});

icon change onclick of menu element jquery

I am trying to replace the calendar icon which is on right side of header,based on item we selected from the menu elements.
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});
Please check full code here

You can do it like this
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
classI= $(this).find("i").attr('class');
$("#chicon i").attr("class",classI+" pull-right");
});
});
Here is working example http://codepen.io/anon/pen/ALWRww

You can write it like this:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var text = $(this).attr('class');
var icon = $(this).find('i').attr('class');
var newClass = icon + ' pull-right';
$("#title").text(text);
$('#chicon i').removeClass();
$('#chicon i').addClass(newClass);
});
});

This will change your icon and text
$(document).ready(function() {
var oldicon = "fa fa-calendar-check-o";
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var newicon = $(this).find("i").attr("class");
$("#chicon i").removeClass(oldicon).addClass(newicon);
oldicon = newicon;
});
});

I have done minor change script as below:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var icon_class=$(this).find('i').attr('class');
$("#chicon").find('i').attr('class',icon_class+' pull-right');
});
});

jQuery/Javascript sliding toggle menu

I'm trying to make a sidebar that when clicked it (aside li) slides down the section paragraph (section p) with the same class.
var $asideGet = $('aside li').click(function(){
$(this).each(function(){
$(this).attr('class');
});
});
var $sectionGet = $('section p').click(function(){
$(this).each(function(){
$(this).attr('class');
});
});
if($asideGet == $sectionGet){
$asideGet.click(function(){
$sectionGet.slideToggle();
});
};

I reviwed the code and got something like this:
Oops... But when I click the aside li, it slides down all the section p, and I just want to slide down the section p with the same class as aside li does.
var $sectionP = $('section p');
$sectionP.hide();
var $asideLi = $('aside li');
function comparing(){
$asideLi.click(function(){
$(this).each(function(){
var $asideClass = $(this).attr('class');
if($sectionP.hasClass($asideClass)){
$sectionP.slideToggle();
};
}); //each function
}); //click function
};

Multiple Dropdown Menus

I am looking to add two different "navigation" sections to a page on mobile. Here is the jQuery pull to make the dropdown work. However, when I add in a second section of markup for the second dropdown, the one menu button opens BOTH menus. Is it possible to use more than one? Or what am I missing to make it open each one separately?
<script>
jQuery(function() {
var pull = jQuery('#pull');
menu = jQuery('nav ul');
menuHeight = menu.height();
jQuery(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
jQuery(window).resize(function(){
var w = jQuery(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
</script>

You need to change the menu and pull variable values.
Also, add a var before the variables as so, so the variables don't become global:
var pull = jQuery('#pull');
var menu = jQuery('nav ul');
var menuHeight = menu.height();