We Keep Coding

why is button toggle not working with class?

When I change my button toggle from ID-Name to Class-Name, the function is not working anymore. Does anyone know why?
I need a class since this button is multiple times on the page and loads in separately via css and sliders. The function and content is still the same.
$(document).ready(function(){
$('.infoBtn').on('click', function () {
var text=$('.infoBtn').text();
if(text === "info"){
$(this).html('close');
} else{
$(this).text('info');
}
});
});

The issue is your use of selector inside the click event:
$('.infoBtn').text();
Pointy:
Your code should use $(this), not $('.infoBtn') inside the handler.
What you have now will get the text only from the first one on the
page.
If you change that to $(this), it should work as required:
$(this).text();
$(document).ready(function(){
$('.infoBtn').on('click', function(){
//REM: Use $(this) and not $('.infoBtn')!
let text = $(this).text();
$(this).text((text === 'info') ? 'close' : 'info')
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = 'infoBtn'>initial</button>
<button class = 'infoBtn'>initial</button>

Click outside menu to close it

Here's my function,
$(document).ready(function () {
$('.a').click(function () {
var here = $(this).next('.b');
if (here.is(":visible")) {
here.hide();
} else {
here.show();
}
return false;
});
});
So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.
How can I close tab just by clicking somewhere on webpage also by on the button?

I end up searching for this on almost every project, so I made this plugin:
jQuery.fn.clickOutside = function(callback){
var $me = this;
$(document).mouseup(function(e) {
if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
callback.apply($me);
}
});
};
It takes a callback function and passes your original selector, so you can do this:
$('[selector]').clickOutside(function(){
$(this).removeClass('active'); // or `$(this).hide()`, if you must
});
Nice, chainable, elegant code.

On document click, the closest helps to check whether the tab has been clicked or not:
$(document).click(function (e) {
if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
$('.b').hide();
}
});

You want to check for a click on the body :
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
menu would be the id of the menu.
If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.

Check this implementation
jQuery(document).ready(function() {
$(document).on('click','body, #btn',function(ev){
ev.stopPropagation()
if(ev.target.id== "btn"){
if($('#modal').is(':visible')) {
$('#modal').fadeOut();
} else{
$('#modal').fadeIn();
}
} else {
$('#modal').fadeOut();
}
});
});
html, body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
Click Me!
</button>
<div id="modal" style="background-color:red;display:none;">
BLA BLA BLA
</div>

To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -
$('body').click(function(e) {
if ( 0 === $(e.target).parents('#container-id').length ) {
/// clicked outside -> do action
}
})

you have to add a click listener to the parent element, like here:
$('.parent-div').click(function() {
//Hide the menus if visible
});
Also because click events bubbled up from child to the parent,
you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:
//disable click event on child element
$('.child-div').click(function(event){
event.stopPropagation();
});

Focus textarea on mobile from click event using jQuery .trigger()

Alrighty, I'm stuck.
I'm trying desperately to focus on a text area programmatically from javascript (jQuery) on mobile. I did my research, and learned that the only way to bring the keyboard up with .focus() is to use a click event. So I made a click event. And it works when I click on the element, except I need to trigger this from a touchhold on a different element. So naturally, I tried .trigger() and .triggerHandler() on the element. But neither of those things work.
TLDR; I need to be able to hold on an element from a list, and after a time, a div will slide down with a textarea and the textarea gets focus (with keyboard).
Any help is appreciated!
Here is my code:
<div class="quicknote" data-id="0">
<span>New Note</span>
<div class="name"></div>
<textarea class="text"></textarea>
<div class="toolbar">
<div class="left cancel">cancel</div>
<div class="right finish">finish</div>
</div>
</div>
jQuery
jQuery(document).ready(function($) {
var holdThresh = 800;
$(".row").on("touchstart", function(e) {
var id = $(this).attr("data-id");
var name = $(this).html();
$(this).addClass("down");
var timer = setTimeout(function() {
$(".quicknote").attr("data-id", id);
$(".quicknote .name").html(name);
$(".quicknote").addClass("open");
$(".quicknote").trigger("click");
e.preventDefault();
}, holdThresh);
$(this).one("touchend touchmove", function(event) {
$(this).removeClass("down");
clearTimeout(timer);
})
$(".quicknote .cancel").on("touchstart", function() {
$(".quicknote").removeClass("open");
})
$(".quicknote").click(function(event) {
$("textarea").focus();
event.preventDefault();
event.stopPropogation();
})
});

I figured it out! For anyone who finds this, here is my updated jQuery:
$(".row").on("touchstart", function(e) {
var id = $(this).attr("data-id");
var name = $(this).html();
var go = true;
var focus = false;
$(this).addClass("down");
var timer = setTimeout(function() {
go = false;
$(".quicknote").attr("data-id", id);
$(".quicknote .name").html(name);
$(".note").val("");
$(".quicknote, .overlay").addClass("open");
focus = true;
e.preventDefault();
}, holdThresh);
$(this).one("touchmove", function(event) {
go = false;
$(this).removeClass("down");
clearTimeout(timer);
});
$(this).one("touchend", function() {
if (go) window.location = "view.php?id=" + id;
else {
if (focus) {
$(".note").focus();
focus = false;
}
$(this).removeClass("down");
clearTimeout(timer);
}
})
})
I'm not sure exactly why this works, but instead of triggering a click on a third element to then focus on the textarea, I set a flag "var focus", and based on some conditions, was able to focus the textarea from the touchend event. Hope this helps someone! :)

jQuery: How to remove appended item on click toggle

I'm appending a class on click of a 'span'. I'm able to remove that appended div on click on other icon and append there. How can I add toggle on every icon clicked twice .This is my jquery below:
var toggle = true;
$('.extra-items span').on('click',function() {
$(".mid-side .same-category").remove();
if(toggle)
{
$(this).closest(".row").append($(".media-categories-all").html());
toggle = false;
}
else
{
$(this).closest(".mid-side .same-category").remove();
toggle = true;
}
})
There are a lot of 'span' also. When it's appended on first click on a icon.. it removes that also in the first click of another icon and nothing is appended in that first click.
Thank you brso05

You can create a global variable and use it to toggle:
var toggle = true;
$('.extra-items span').on('click',function() {
//removed remove() here
if(toggle)
{
$(this).closest(".row").append($(".media-categories-all").html());
toggle = false;
}
else
{
$(this).closest(".mid-side .same-category").remove();
toggle = true;
}
});

Jquery: After removing content with a click how do I reset the button with the one I triggered the add function?

So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery

I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.