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 do I hide a section when I show a different section?

Basically I want one section to be shown at first as the home page. When I click on a link, I want that section to be shown, but everything else hidden, and so on. Every time I click a link, I only want the clicked on link's section to be shown.
I am close, but stuck. Here is my HTML:
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about showing">
<h2>Contact</h2>
</div>
</div>
And here is my script:
$(document).ready(function() {
$('.about').hide();
$('.contact').hide();
$('.showing').show();
$('#contact').on('click', function(e) {
e.preventDefault();
$('div').removeClass('showing');
$('.contact').addClass('showing');
if ($('div').hasClass('showing')) {
$('div').show();
} else {
$('div').hide();
}
});
});
So it shows the 'About Me' section right away and everything else is hidden. When I click the 'Contact' link it removes the 'showing' class from all my 'div's and adds the 'showing' class to my contact section. I then check to see if the 'div' has the 'showing' class, if it does I have it show the 'div' otherwise I want it to hide it.
However, when I click on the Contact link, it does show the Contact section, but it does not hide the About Me section. I know this is a long post, I am just trying to make sure I explain everything correctly. Any help is greatly appreciated!

I would strongly suggest you use data fields and common classes to make it generic.
var $pages = $('.container');
$('.menu').on('click', function(e){
//remove showing from all containers
$pages.removeClass('showing');
//put it on the container with the matching class of the data target
$pages.filter('.'+ $(e.target).data('target')).addClass('showing');
});
.container {
display: none;
}
.container.showing {
display: unset;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
Other
<div class="container-fluid">
<div class="container home showing">
<h2>Home</h2>
</div>
</div>
<div class="container-fluid">
<div class="container about">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact">
<h2>Contact</h2>
</div>
</div>
<div class="container-fluid">
<div class="container other">
<h2>Other</h2>
</div>
</div>

Here's a few things you can optimize:
$(document).ready(function() {
$('.about, .contact').hide(); //put both of them in single selector
$('.showing').show(); //this shows the only element that has "showing
$('#contact, #about').on('click', function(e) {
e.preventDefault();
var self = $(this); //reference to the object being clicked
var target = $("." + self.attr('id'));
//removes "showing" class from all others and hides them
$(".container").not(target).removeClass("showing").hide();
//adds "showing" class to the new current item
target.addClass("showing").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
About Me
Contact
<div class="container-fluid">
<div class="container about showing">
<h2>About Me</h2>
</div>
</div>
<div class="container-fluid">
<div class="container contact"> <!--you don't want that "showing" class here!-->
<h2>Contact</h2>
</div>
</div>

how to active 4 same Data ID when onClick?

i wanna to click one button which is "c-1" but it can active and display the content for all same id,but in the same time, what can i add in to call all in different div?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<div class="c-1" data-id="tab-1">
<p>for 1 btn</p>
</div>
<div class="c-1-details" id="tab-1">
<p>for 1 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
</ul>
<div class="tab-content" id="tab-1">
tab-1-content
</div>
</div>
<script>
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("#" + tab).addClass('active');
});
</script>

Note :Id is unique one .so better use class for multiple element match
I just coded from multiple id matches with attr matching [id="tab"]
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("[id='"+tab+"']").addClass('active');
});
.active{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<div class="c-1" data-id="tab-1">
<p>for 1 btn</p>
</div>
<div class="c-1-details" id="tab-1">
<p>for 1 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
</ul>
<div class="tab-content" id="tab-1">
tab-1-content
</div>
</div>

Toggle multiple classes

I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});

You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>

HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle

Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>

Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>

Jquery click only work once on toggle

I am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!

Use on function to bind events,
$('element').on('click', function() {
});

$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this