Develop Reference

why does my jquery function fadeOut work but slice doesn't work?

I need to make a button that views three consequent posts
when I click "view all" the three "div"s should show up
I need to make the three 'div's show up if I click the view all button
so I am using jquery here
$('.posts .repeat-grid').slice(0, 3).show();
$('#view-all').on('click', function() {
$('.posts .repeat-grid:hidden').slice(0, 1).slideDown();
if ($('.posts .repeat-grid:hidden').length === 0) {
$('#view-all').fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
any idea why it is not working?

You Can Try this if that's what you mean
$('#view-all').on('click', function() {
$('.posts').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>

How to stay on div after toggle jquery?

$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").toggle("hover");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I have a simple button i.e. Sent. Now, What I actually want when I hover on Sent button then It show div i.e. <div class="drop"> but it hide when I move cursor from Sent button to <div class="drop">.
Now, I want stay on <div class="drop"> when hover on Sent if I remove my mouse from <div class="drop"> it will hide again. So, How can I do this? Please help me.
Thank You

you can try below code where show drop when hover on sent button. On hover of drop do nothing but hide it when you leave drop
$(document).ready(function () {
$(".req_sent").hover(function(){
$(".drop").show();
});
$(".drop").hover(function(){
//do nothing
}, function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>

Here you go
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
</div>
<script>
$(document).ready(function () {
$(".profile_btnn").hover(function(){
$(".drop").toggle("hover");
});
});
</script>

You want to keep, visible div event mouse out from Sent button. And hide when its mouse over on div
Just don't use toggle() and apply show() to get it done.
Please check below code:
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").show('slow');
});
$(".drop").hover(function () {
$(".drop").hide('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>

Is there a way of putting the text of a div in another div on click?

Is there a simple way of putting the text of a div in another div on click? I did it before with inputs, but I used .val().
<div id="someText"> Hello </div>
<div id="putHere"> </div>
I'm glad for help, Thanks!

You are looking for .text():
$(document).ready(function() {
$('#click,#div2').on('click',function() {
$('#div2').text($('#div1').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Foo</div>
<div id="div2">Bar</div>
<button id="click">Click</button>

This is a pure Javascript solution if you are interested :
document.getElementById('someText').onclick = function(){
document.getElementById('putHere').textContent = document.getElementById('someText').textContent;
};
<div style='background:red' id="someText"> Hello </div>
<div style='background:blue' id="putHere"> </div>
Update: Removed Button since the OP didn't need one. Now click on the red div and blue div will be populated

With jQuery !
Click Event on div
$(document).ready(function (){
$("#someText").on("click", function (){
$("#putHere").text($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Click Me! </div>
<div id="putHere"> </div>
Click Event on Button
$(document).ready(function (){
$("#btn").on("click", function (){
$("#putHere").text($("#someText").text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Hello World! </div>
<div id="putHere"> </div>
<button id="btn">Click ME !</button>
Pure JS
Click Event on button
document.getElementById("btn").onclick = function() {
document.getElementById("putHere").innerHTML = document.getElementById("someText").innerHTML;
};
<div id="someText">Hello World!</div>
<div id="putHere"></div>
<button id="btn">Click ME !</button>
Click Event on div
document.getElementById("someText").onclick = function() {
document.getElementById("putHere").innerHTML = document.getElementById("someText").innerHTML;
};
<div id="someText">Click Me!</div>
<div id="putHere"></div>

This should work
$('#putHere').text($('#someText').text());

$("button").click(function() {
$("#putHere").html($("#someText").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText"> Hello </div>
<div id="putHere"> </div>
<button>Click</button>

onBlur() not working properly

I want the <div> with class .shell-pop to be closed if they click out of the element area. It appears not to fire though, and none of the logs or alerts go off either. I've looked around and everything appears right?
jQuery
$('document').ready(function () {
updateCart();
$(".shell").click(function (e) {
e.preventDefault();
$(".shell-pop").fadeIn(300, function () { $(this).focus(); });
});
$(".shell-pop").on('blur', function () {
$(this).fadeOut(300);
window.alert("work");
console.log("works");
});
});
HTML
<div class="options-area">
<div class="options-popup shell-pop">
<div class="swatches">
<div class="colors-shell colors" id="green">
<p class="prices-for-swatch">$14.23</p>
</div>
<div class="colors-shell colors" id="pink">
<p class="prices-for-swatch">$7.23</p>
</div>
<div class="colors-shell colors" id="blue">
<p class="prices-for-swatch">$11.25</p>
</div>
<div class="colors-shell colors" id="orange">
<p class="prices-for-swatch">$10.23</p>
</div>
<div class="colors-shell colors" id="default-shell">
<p class="prices-for-swatch">FREE</p>
</div>
<div class="colors-shell colors" id="exit">
<img src="img/Silhouette-x.png" class="x-logo" alt="exit" />
<p class="closeit">CLOSE</p>
</div>
<div class="shell square">
<img src="img/controllers.png" class="item-icon" alt="controller-piece">
<p class="name-of-item">Shell</p>
<p id="shell_Price1" class="items-price">0.00</p>
</div>

Give your <div> a tabindex.
The tabindex global attribute is an integer indicating if the element
can take input focus (is focusable), if it should participate to
sequential keyboard navigation, and if so, at what position.
Observe the following...
<div tabindex="-1"></div>
$('div').on('blur', function() {
console.log('blurrr');
});
JSFiddle Link - simple demo

Blur will only fire on form elements. You should consider a different approach. For example, you could watch for click events on .shell-pop and determine it's current state.
Like
$(document).on('click', function(e){
if ($(e.target).is('.shell-pop')) {
alert('focused');
} else {
alert('blured');
}
});

Showing Overall Description on button click

I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.

Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.