jquery show hide multiple div fastest way - javascript

Hello How can Possible to
Work with show or hide multiple div
The fastest way possible
Why do I need to number each div
like this :
open,close,show_text
open2,close2,show_text2
I wish that it will be repeated for each div 10 times
$(document).ready(function(){
$(".open").click(function(){
$(".show_text").show('blind');
$(".open").hide();
$(".close").show();
});
$(".close").click(function(){
$(".open").show();
$(".show_text").hide('blind');
$(".close").hide();
});
});
$(document).ready(function(){
$(".open2").click(function(){
$(".show_text2").show('blind');
$(".open2").hide();
$(".close2").show();
});
$(".close2").click(function(){
$(".open2").show();
$(".show_text2").hide('blind');
$(".close2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->
<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->

Wrap you content in a container div, then you can use
.closest()
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
.find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
HTML
<div class="container">
<div class="open" style="cursor:pointer">Open 1
</div>
<!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div>
<!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div>
</div>
Code
$(".open").click(function() {
//Traverse up to container div
var container = $(this).closest('.container');
//Use .find() to find child
});
Here is an example:
$(document).ready(function() {
$(".open").click(function() {
var continer = $(this).closest('.container');
continer.find(".show_text").show('blind');
continer.find(".open").hide();
continer.find(".close").show();
});
$(".close").click(function() {
var continer = $(this).closest('.container');
continer.find(".open").show();
continer.find(".show_text").hide('blind');
continer.find(".close").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="open" style="cursor:pointer">Open 1
</div>
<!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div>
<!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div>
</div>
<!-- show_text -->
<div class="container">
<div class="open" style="cursor:pointer">Open 2
</div>
<!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 2
</div>
<!-- close -->
<div class="show_text" style="display:none;">
hello world 2
</div>
</div>
<!-- show_text -->

$(document).ready(function(){
$("div[class^=open]").click(function(){
$("div[class^=show_text]").show('blind');
$("div[class^=open]").hide();
$("div[class^=close]").show();
});
$("div[class^=close]").click(function(){
$("div[class^=open]").show();
$("div[class^=show_text]").hide('blind');
$("div[class^=close]").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open" style="cursor:pointer">Open 1
</div><!-- open -->
<div class="close" style="cursor:pointer; display:none;">Close 1
</div><!-- close -->
<div class="show_text" style="display:none;">
hello world 1
</div><!-- show_text -->
<div class="open2" style="cursor:pointer">Open 2
</div><!-- open -->
<div class="close2" style="cursor:pointer; display:none;">Close 2
</div><!-- close -->
<div class="show_text2" style="display:none;">
hello world 2
</div><!-- show_text -->

Based on the details you have provided, if you haven't figured this out yet, I think that the most efficient way to accomplish this task is by using a loop (of some sort). In my mind this would make the most sense if your goal is speed. That being said, I think that attempting to do this with jQuery's show() & hide() will only hold you back.
If you want to "number" each element, and display them at different times, depending on certain circumstances, think JSON; JavaScript's older and more attractive brother. I'm happy to assist you further if need be, else, cheers.

Related

how select all element with the same class that aren't child of same class?

how to select only the parent element with a class?
❌ not all elements with a class like it do document.querySelectorAll(".mycard")
✅ but only the first parent element with the class,
and this element that we take don't need to have a parent with .mycard
it needs to return an array with all the divs that meet these conditions, and should work with every deep tree (10 of deep is a good point it is difficult to do)
so it should not consider a div if not have the class, and go deep until finds the class we want, breaks, tries to search to others and repeat the process, and return us an array.
if we find the wanted class, we add it to the array to return BUT
we need to check if the nested divs continue or not
if continue and we don't any other nested thing is fine don't return anything new
if it stops we need to search if there is another div with class, if add it to the array and repeat process until we finish the tree deep.
here is an example where you try your code:
<div class="mycard"> <!-- should get the parent only -->
<div class="mycard">
<div class="mycard">
<div class="mycard"></div>
</div>
</div>
</div>
<div class="mycard"> <!-- should get also this with a array of the fist and second -->
<div class="mycard">
<div class="mycard">
<div class="mycard"></div>
</div>
</div>
</div>
<div class="another-div">
<div class="mycard">
<!-- should get also this that isn't in body directly -->
</div>
</div>
<div class="another-div">
<div class="foo">
<div class="bar">
<div class="mycard">
<!-- should get also this that isn't in body directly -->
</div>
</div>
</div>
</div>
<div class="another-div">
<div class="foo">
<div class="bar">
<div class="mycard"> <!-- this -->
<div class="boo">
<div class="mycard"> <!-- also this -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mycard"> <!-- this -->
<div class="boo">
<div class="mycard"> <!-- also this -->
<div class="mycard">
<div class="mycard"></div>
</div>
</div>
</div>
</div>
<!-- returns [mycard, mycard, mycard, mycard, ...] 8 in total here, loopable in forEach -->
returns [mycard, mycard, mycard, mycard, ...] 8 in total here, loopable in forEach
You can use document.getElementsByClassName and convert the result to an array. From there, you can use .filter(). Like this:
let els = [...document.getElementsByClassName('mycard')];
els = els.filter(el => !el.parentNode.classList.contains('mycard'));
console.log(els);
<div class="mycard">
<!-- should get the parent only -->
<div class="mycard">
<div class="mycard">
<div class="mycard"></div>
</div>
</div>
</div>
<div class="mycard">
<!-- should get also this with a array of the fist and second -->
<div class="mycard">
<div class="mycard">
<div class="mycard"></div>
</div>
</div>
</div>
<div class="another-div">
<div class="mycard">
<!-- should get also this that isn't in body directly -->
</div>
</div>
<div class="another-div">
<div class="foo">
<div class="bar">
<div class="mycard">
<!-- should get also this that isn't in body directly -->
</div>
</div>
</div>
</div>
<!-- returns [mycard, mycard, mycard, mycard] loopable in forEach -->
You can easily play with negation and descendant selectors to achieve
your requirement.
//this will select all "mycard" classed elements
//which are not descendants of any "mycard" classed elements.
document.querySelectorAll(".mycard:not(.mycard .mycard)");
You can also achieve it using JQuery.
$(".mycard").not('.mycard .mycard');

Duplicating button bar without cloning

I am having an issue duplicating a button bar without making and exact clone of the first button bar. In my attempt, the second button bar that forms does not work properly. When the buttons are clicked, they do nothing. I want all duplicated button bars to be new and standalone. Any assistance with this would be greatly appreciated. Please see my working code as an example. http://codepen.io/EBM84/pen/RKyNpE?editors=1010
<div id="pfs-tab3" class="tab">
<div class="duplicate-sections">
<div class="form-section">
<section class="duplicate-container">
<div class="tabs">
<ul class="tab-links main-tab-links button-bar" style="margin-top:0;">
<li class="active">box 1</li>
<li>Box 2</li>
</ul>
<div class="tab-content" style="max-height: 125px;">
<div id="notes-tab1" class="tab active">
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes">
<div class="text-field" style="max-width:375px;">
<p class="checkbox-label">Name</p><input type="text" class="text-box-column">
</div>
</div> <!-- End .button-bar-scroll -->
</div> <!-- End .notes-tab1 -->
<div id="notes-tab2" class="tab">
<div class="tab-content-scroll button-bar-scroll button-bar-scroll-notes">
<div class="text-field" style="max-width:375px;">
<p class="checkbox-label">Amount</p><input type="text" placeholder="$" class="text-box-column">
</div>
</div> <!-- End .button-bar-scroll -->
</div> <!-- End .notes-tab2 -->
</div> <!-- End .tab-content -->
</div> <!-- End .tabs -->
</section> <!--duplicate-container -->
</div> <!-- End .form sections -->
</div> <!-- End .duplicate sections -->
<a class="btn btn-duplicate addsection" href="#" role="button" data-section='0'>+ Add</a>
Buttons inside cloned sections do not work because .clone() by default do not copy event handlers. You should use .clone(true) if you wish to copy event handlers as well.
https://api.jquery.com/clone/
When cloning events this way, make sure you pick up target elements within event handlers more precisely.
For example:
//following line will show/hide tabs the $(document) //incorrect
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
//following line will show/hide only tabs inside particular ('.form-section') //correct
jQuery(this).parents('.form-section').find('.tabs ' + currentAttrValue).show().siblings().hide();

Fullpage.js : Sections have higher height than content

I'm currently working on a single page website using Bootstrap and fullpagejs :
I've followed the required HTML structure, but each sections of my website have got a huge height. So the sections don't fit with their content.
I noticed that if I add the fp-auto-height class, everything is ok. The content fits with the sections. But this is not the right way to do that.
I have no idea about what happens.
Here is my first section for example
<div id="fullpage">
<!-- section 1 begin -->
<div data-anchor="p1-a" class="section">
<div class="container-fluid">
<div id="p1" class="row vertical-align">
<div class="col-md-offset-5 col-md-6">
<div class="row">
<div class="col-xs-12">
<h1 id="title-p1" class="reduce-space text-center">ANTHONY<span style="color: #E28509;">ROANI</span></h1>
</div>
</div> <!-- end row title intro -->
<div class="row">
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div><!-- end left intro -->
<div class="col-md-6">
<p class="intro-text">
...
</p>
</div> <!-- end right intro -->
<div class="container-fluid">
<i class="intro-text"> ...</i>
<p class="intro-text">- Luc Fayard </p>
</div><!-- end citation intro -->
</div> <!-- end row content text intro -->
</div> <!-- end colonnes + offset page 1 -->
</div><!-- end bigrow page 1 -->
</div>
</div> <!-- SECTION 1 END -->
[... other sections]
</div> <!-- end fullpage -->
Make sure you are not forgetting to add the compulsory <!DOCTYPE html> declaration at the very start of your document as detailed in this tutorial.
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Demo
</body>
</html>
Doctype is necessary in any website.

Jquery Fade transition doesn't look right

I have a simple fade transition that hides the current div, while un-hiding the div below it. However the transition doesn't look right as when the fade is happening it briefly shows all the div's. I'm new to using jQuery so could anyone show me how i could polish this up a bit to make it look better when the fade transition takes place?
p.s i know the jQuery could be coded better, but again I'm pretty new to jQuery so if anyone has a better way of coding this let me know.
Thanks.
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
jQuery:
$(document).ready(function(){
$("#buttonone").click(function(){
$("#home").fadeOut();
});
});
$(document).ready(function(){
$("#buttontwo").click(function(){
$("#portfolio").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#aboutfour").fadeOut();
});
});
$(document).ready(function(){
$("#buttonthree").click(function(){
$("#about").fadeOut();
});
});
$(function() {
$('#portfolio').addClass('hidden').hide();
$('#buttonone').click(function() {
if ($('#portfolio').hasClass('hidden')) {
$('#portfolio').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#about').addClass('hidden').hide();
$('#buttontwo').click(function() {
if ($('#about').hasClass('hidden')) {
$('#about').removeClass('hidden').fadeIn(1000);
}
});
});
$(function() {
$('#contact').addClass('hidden').hide();
$('#buttonthree').click(function() {
if ($('#contact').hasClass('hidden')) {
$('#contact').removeClass('hidden').fadeIn(1000);
}
});
});
How about you add each button class="button" attribute, and run the following jQuery:
$('.button').click(function() {
if($(this).hasClass("hidden"))
{
//if already hidden, do you want to display it back?
$(this).removeClass("hidden");
}
else{
$(this).parent().parent().next().fadeIn(1000);
$(this).addClass("hidden");
$(this).parent().parent().fadeOut(1000);//this will hide the button as well, is this okay?
}
}
});
So, when a button is clicked the div containing that button will be hidden, and the next div will be showed, is that right? Then, at the beginning, only the first one will be displayed? I am not clear about the functionality.
UPDATE
I got it working finally. There you go: https://jsfiddle.net/ev64mqsp/
note that I included one extra div for Home div to make all main content divs have the same structure.
$('.button').click(function() {
if($(this).next().hasClass("hidenext"))
{
$(this).parent().parent().fadeOut(1000)
$(this).parent().parent().next().removeClass("hidenext");
}
else{
$(this).parent().parent().fadeOut(1000);
$(this).parent().parent().next().addClass("hidenext");
}
});
HTML:
<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
<div>
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button class="button" id="buttonone" type="button">Click Me!</button>
</div>
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button class="button" id="buttontwo" type="button">Click Me!
</button>
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background- color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button class="button" id="buttonthree" type="button">Click Me!</button>
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button class="button" id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
Class hidden (supposed to have display:none) should be added when fadeOut() finish for a good animation. If you want to mantain div position you may use visibility:hidden removing display:none given by fadeOut()
$(document).ready(function(){
$("body > div").not("#home").addClass("hidden");
$("button[type=button]").click(function(){
if ($(this).parent().attr('id') == 'home') {
$(this).parent().fadeOut(1000,function(){
$(this).addClass('hidden');
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
});
} else {
$(this).parent().parent().fadeOut(1000,function(){
$(this).addClass('hidden');
if ($(this).next().hasClass('panel')) {
$(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
}
});
}
});
});
.hidden { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="content" align="center"style="width:400px;height:200px;background-color:grey;">
<h2>Home</h2>
<p>DIV 1 CONTENT GOES HERE</p>
<button id="buttonone" type="button">Click Me!</button>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:200px; background-color:grey;">
<div class="content">
<h2>Portfolio</h2>
<p> DIV 2 CONTENT GOES HERE </p>
<button id="buttontwo" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>About</h2>
<p>DIV 3 CONTENT GOES HERE</p>
<button id="buttonthree" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:200px;background-color:grey;">
<div class="content">
<h2>Contact</h2>
<p> DIV 4 CONTENT GOES HERE </p>
<button id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
</div>
</div>
<!-- /Contact -->

Multiple Divs Show/Hide One at a time

I have a set of div's, What I want to do is when I click the read more button It shows the div "myContent" and hides the button for that particular container not all the divs with the same class name. and when I click the close button it hides the div (and because the button is there it should technically hide the button as well) and show the read more button again.
Whats happening right now is either all are showing or none are showing.
I am a newbie (using Jquery) Any help most appreciated.
The HTML
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
<!-- -->
<div class="member-content">
<div class="member-box">
<div class="photo">
<img src="" alt="" />
</div>
<div class="contact-details">
<h3>Mike</h3>
<span class="role">Member</span><br>
<span class="telephone">07595 8674523</span><br>
Read More
</div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->
<div class="te contentDiv">
<div class="myContent" style="display:none">
<p>This Text is hidden</p>
<a id="close_btn" href="#" class="close-more">Close</a>
</div>
</div>
<!-- -->
Thanks!
You can try this, Based on my understanding.
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
$(this).closest('.myContent').hide();
});
DEMO
If I understand right here is what you are looking for :)
$('.read-more').click(function () {
$(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
$(this).hide();
});
$('.close-more').click(function () {
$(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
$(this).closest('.myContent').hide();
});

Categories