We Keep Coding

How do I toggle one element without the others with jQuery?

I was wonder how I can toggle one element without toggling others... I just don't want to do this every time:
HTML:
<div class="share-toggle as-1"></div>
<div class="audio-share as1">
<p>Some Text</p>
</div>
<div class="share-toggle as-2"></div>
<div class="audio-share as2">
<p>Some Text</p>
</div>
JS:
$('.as-1').click(function() {
$('.as1').slideToggle('fast');
});
$('.as-2').click(function() {
$('.as2').slideToggle('fast');
});
Is there a way to write this in short? pls help... thx

You can use jQuery to select all elements, which className contains a certain substring:
$('*[class*="as-"]')
This will select all Elements in the DOM (*), of which the className ([class=""]) has "as-" anywhere (*) in it.
And then you can use the Element passed as this to get the number of the element after the "as-" and toggle the wanted element:
$('*[class*="as-"]').click(function () {
let elemNum = this.className.match(/as-(\d+)/)[1];
$("as"+elemNum).slideToggle('fast');
});

I know you already accepted an answer, but anyway…
Here is, in my opinion, a better solution.
Why is that?
Only 3 lines of code, and not using any regex or partial class names…
See comments in my code for more details:
// You could use class^=[as-] to filter on the classes that start with as-,
// (the ^ would be better than a *, because more specific)
// But I suggest you to use the 'share-toggle' class, there's no need to complicate things here:
$('.share-toggle').on('click', function(){
// The following will get the .audio-share element that is after the element we just clicked,
// If your HTML structure is gonna stay well structured like this, it's the finest solution:
$(this).next('.audio-share').slideToggle('fast');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share-toggle as-1">[ CLICK HERE ]</div>
<div class="audio-share as1">
<p>Some Text</p>
</div>
<div class="share-toggle as-2">[ CLICK HERE ]</div>
<div class="audio-share as2">
<p>Some Text</p>
</div>
I hope you will consider this answer.
And I hope it will help!

Contenteditable elements change ID after modifications

I have some problems with a contenteditable div annoying behaviour. I have a few elements inside, let's say the code looks like that:
<div contenteditable="true">
<p id="element-id-1">element-id-1</p>
<p id="element-id-2">element-id-2</p>
</div>
All works as intended except for one thing - when I triple click the first paragraph to select and remove it (with delete or backspace) the second paragraph content 'jumps' into its place, but retains the first paragraph ID. Is there a way to prevent this, so after I triple click the first paragraph and remove it, the second paragraph remains with the same ID (#element-id-2)? JSFiddle with described functionality here: https://jsfiddle.net/t8e28bmx/ Thanks!

Try this code.
<div contenteditable="plaintext-only">
<p id="element-id-1">element-id-1</p>
<p id="element-id-2">element-id-2</p>
</div>
Reference: https://w3c.github.io/editing/contentEditable.html#h-contenteditable

<div>
<p contenteditable="true" id="element-id-1">element-id-1</p>
<p contenteditable="true" id="element-id-2">element-id-2</p>
</div>

How to remove child element without losing the content using jquery?

I'm trying to remove the <p> tag inside the <h3> without losing the content.
<h3 class="blog-heading">
<p>This is content</p>
</h3>
I tried with unwrap(), remove() and empty() function but these functions are removing my data as well.
$('.blog-heading').find('p').remove();
Can any one guide me is this possible in jquery and how can i fix this. I will appreciate. Thank You.

You want to unwrap p content:
$('.blog-heading p').contents().unwrap();

try the following
$('.blog-heading').text($('.blog-heading').find('p').text())

Set html text into textarea js

I have a textarea where i need to set some html text
<textarea id="text"></textarea>
<div id="elem">
<p>text</p>
<hr />
<br />
<p> some text</p>
</div>
..
$('#text').val($('#elem').html());
when I do this it's put text with html tags instead of parse it and put like a plain text.
i also tried functions append(), html(), text(). none of them helps me

text() worked for me. See https://jsfiddle.net/mgLp90em/.
What is the jQuery version you are using?

I'd recommend to use a contenteditable div element instead of a textarea as follows:
<div class="text-area" contenteditable>
<h1>Your content here</h1>
</div>
See JSfiddle demo

This should do the trick, gets only text from the children within your #elem:
$('#text').val($('#elem').children().text());
FIDDLE

Clone Div into another DIV

I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>

Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.