We Keep Coding

Disable button 1 Section when click on button 2

Have multiple buttons and sections associated with those buttons in the Elementor page builder.
What I am trying to achieve is when page loads, we can only see buttons and section will toggle when someone clicks on the button.
I have managed to achieve that, but when clicking on second button, button 1 section should hide and button 2 section should display.
Here is the w3 schools link for my project
jQuery(document).ready(function( $ ){
var hbtn = $(".coursesBtn");
var hcon = $(".coursesSection");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this)
$(hcon).eq(index).slideToggle("slow");
e.preventDefault();
});
});
jQuery(document).ready(function( $ ){
var hbtn = $(".videosBtn");
var hcon = $(".videosSection");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this)
$(hcon).eq(index).slideToggle("slow");
e.preventDefault();
});
});

You can use onclick for buttons for example
<button class="btn1" onclick="f1()">BUTTON1</button>
and add the function to toggle in f1()

Here is a quick example, the idea is to hide the other sections first, and show the section that you want to be displayed;
$(document).ready(function($) {
$('.btn1').click(function() {
$('.section').hide();
$('.section1').show();
})
$('.btn2').click(function() {
$('.section').hide();
$('.section2').show();
})
$('.btn3').click(function() {
$('.section').hide();
$('.section3').show();
})
})
.section {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
.section2 {
background-color: lightgreen;
}
.section3 {
background-color: orange;
}
<button class="btn1">BUTTON1</button>
<button class="btn2">BUTTON2</button>
<button class="btn3">BUTTON3</button>
<div class="section section1">
This is Section1.
</div>
<div class="section section2">
This is Section2.
</div>
<div class="section section3">
This is Section3.
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Add a new class for each button (.btn) and section (.section) and use these as in the code below. You can have as many buttons and sections as you want and the code below will work without any modification:
var hbtn = $(".btn");
var hcon = $(".section");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this);
hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
.eq(index).slideToggle("slow");
});
DEMO
$(document).ready(function( $ ){
var hbtn = $(".btn");
var hcon = $(".section");
hcon.hide();
hbtn.click(function(e) {
var index = hbtn.index(this);
hcon.hide() //OR hcon.filter(':visible').slideToggle("slow")
.eq(index).slideToggle("slow");
});
});
.section1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
.section2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn1 btn">BUTTON1</button>
<button class="btn2 btn">BUTTON2</button>
<div class="section1 section">
This is Section1.
</div>
<div class="section2 section">
This is Section2.
</div>

How to change content of div on hover using JQuery/Javascript

I'm trying to change the contents of a div when it's hovered over using JQuery. I've seen answers on stack overflow, but I can't seem to get it working.
I've tried
$( "imgDiv" ).mouseover(
function() {
$("tdiv").textContent = "hovering";
},
function() {
$("tdiv").textContent = 'title';
}
);
I've also replaced "mouseover" with "hover". I've used a variable and the actual div in place of "imgDiv".
This is what my code looks like:
imgDiv = document.getElementById('imgDiv');
tDiv = document.getElementById('titleDiv');
$( "imgDiv" ).mouseover(
function() {
$("tdiv").textContent = "hovering";
}, function() {
$("tdiv").textContent = 'title';
}
);
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id=titleDiv>title</div>
</div>

You can use jQuery's .hover() function along with the .text() function to do what you want. Also, no need for document.getElementById:
$("#imgDiv").hover(
function() {
$("#titleDiv").text("hovering");
},
function() {
$("#titleDiv").text('title');
}
);
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id="titleDiv">title</div>
</div>

You can target the div with jQuery, and store it's original value. On mouseout, you can restore it. Also using mouseenter reduces the number of times the logic processes as mouseover will fire for every mouse move over the element.
var $titleDiv = $('#titleDiv');
$("#imgDiv")
.on('mouseenter', function() {
$titleDiv.data('originalText', $titleDiv.text());
$titleDiv.text('hovering');
})
.on('mouseout', function() {
$titleDiv.text($titleDiv.data('originalText'));
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id="titleDiv">title</div>
</div>

First of all, replace $("imgDiv") with $("#imgDiv") to get the element with id (#) imgDiv.
Then $("tdiv") doesn't exist, you probably mean $("div") to select a <div>tag in your DOM.
And finally, $("tdiv").textContent doesn't exist. You can try $("div").html() or $("div").text() to get the <div> tag content
--
Quick reminder : jQuery documentation on selectors
$("div") will select the <div> tags
$(".element") will select tags with class="element"
$("#element") will select tags with id="element"

You need to try like this
$( "#imgDiv" ).mouseover(function() {
$("#titleDiv").text("hovering");
}).mouseleave( function() {
$("#titleDiv").text('title');
});
body {
background: white;
padding: 20px;
font-family: Helvetica;
}
#imgDiv {
width: 100px;
height: 100px;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgDiv">
<div id=titleDiv>title</div>
</div>

Easy solution,
var s = document.getElementsByTagName('div');
function out() {
s[0].innerHTML = 'hello';
}
function ibn() {
s[0].innerHTML = 'Myname';
}
<div onmouseout = 'out()' onmouseenter = 'ibn()'> Myname </div>

You cannot call reference a dom with pure Javascript and them manipulate it with jQuery - it will not work.
Try this:
$( "#imgDiv" ).mouseover(function() {
$("#titleDiv").text("hovering");
});
The titleDiv id has to be referenced in your code using "#", then the id name.
Also, use $("#name_of_id").text("your content") instead of .textContent()

How to execute a function when two text in different variables are equal

I have two divs, one has class name ".tab" and the other has the id name "#director". I want to execute a function when "#director" element has the text "left". I want to change the background of .tab div to green when it is clicked but if only the #director element has the text "left" in it. so the function i made keeps not executing. Here is my code:-
var leftText = "left";
var directorText = $('director').text();
$(".tab").click(function(){
if (leftText == directorText) {
/*Your Stuff Here*/
$( ".tab" ).css( "background", "green" );
}
});
div{
height: 100px;
width:100px;
margin: 50px;
float: left;
background:#ddd;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab"></div>
<span id="director">left</span>

The jQuery selector for ids would be var directorText = $('#director').text();

Why does replaceWith cancels calls to its variable?

I'm trying to clone dom elements and change their tags. But after I replace the main element I cannot change its children nor apply some click events.
I commented line after which it stops working.
Thanks for help!
http://codepen.io/sanns/pen/eJvzBN?editors=101
var selectDom = $('select');
selectDom.each(function() {
var clone = $(this).clone().insertAfter(this);
//take classes from clone
var classesStr = clone.attr('class');
clone = clone.replaceWith(function(index, oldHTML) {
return $('<div class="custom-select ' + classesStr + '">').html(oldHTML);
});
//why does not work?
clone.find('option').replaceWith(function(index, oldHTML) {
return $('<li>').html(oldHTML);
});
clone.wrapInner('<ul class="scrollbox"></ul>').prepend('<span class="shower"> Выберитеtttttttttteeeee тратататататат</span>');
//BEHAVIOR SELECT
clone.on('click', function() {
alert('asdf');
});
});

Actually .replaceWith() returns the original jQuery object, not the replacement with something.
You can find more details : http://api.jquery.com/replacewith/
Here is the small example of it:
$( "button" ).click(function() {
$( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
button {
display: block;
margin: 3px;
color: red;
width: 200px;
}
div {
color: red;
border: 2px solid blue;
width: 200px;
margin: 3px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>

Get links to stay active

I have 4 options that, when clicked, the clicked option becomes focused and its background-color/text color change, while all the other revert to the normal states. I have some code where I can change font color, but I can't figure out how to change the div color. I'm also trying to figure out in CSS and with this code how to have one of the options be by default highlighted when the page loads.
Jquery- the last line "($("a")" is the line of code that changes font color; the code above it has to do with a filtering system I have on the page.
$(function () {
var $panels = $( '#image-wrapper .panel' );
$( '#category > div > a' ).on( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$("a").addClass("active-color").not(this).removeClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
HTML
<div id="category">
<div class="all-div current-div">
<h2>ALL</h2>
</div>
<div class="ed-div current-div">
<h2>EDITORIAL</h2>
</div>
<div class="pr-div current-div">
<h2>PR</h2>
</div>
<div class="cr-div current-div">
<h2>CREATIVE</h2>
</div>
</div>
CSS
#content,
#category {
overflow: hidden;
}
#category div {
float: left;
margin: 40px 0 0 0;
height: 100px;
width: 240px;
background-color: #F5F5F5;
}
#category .all-div {
background-color: #000000;
}
#category .all-div a {
color: #ffffff;
}
.active-color {
color: #000000;
background-color: green;
}
.active-bg {
background-color: green;
}

Well, .on was not working on your selector so i changed it to .live and changed your selector for the backgrounds to .current-div because your a tags need display: block to have a visible background.
check this:
http://jsfiddle.net/A3n7S/15/
$(function () {
var $panels = $( '#image-wrapper .panel' );
$(".current-div").not('.all-div').first().addClass("active-color")
$( '#category > div > a' ).live( 'click', function (event) {
event.preventDefault();
var categoryToShow = $( this ).data( 'filter' );
$panels.addClass( 'active' ).filter( '.' + categoryToShow ).removeClass( 'active' );
$(".current-div").not('.all-div').removeClass("active-color");
$(this).parent().addClass("active-color");
/*$("#category .current-div").addClass("active-bg").not(this).removeClass("active-bg");*/
} );
});
Replace that:
.active-color {
color: #000000;
background-color: green;
}
with:
#category .active-color {
color: #000000;
background-color: green;
}