Hide and show 1 time clicking Jquery - javascript

The effect i got right now, it's shows the div paragraph . But when I add another div it's like all div shows paragraph together . How to control this by clicking 1 at the time?
Your help really appreciate.
HTML
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
JS
$('.open').on('click',function(event){
$('.ranch').toggle();
});
DEMO

You are using $('.ranch').toggle(); so you are selecting all paragraphs with class ranch and thus all paragraph are toggled when you click on it. A quick fix will be changing the line to $(this).siblings('.ranch').toggle();
The final JavaScript will be
$('.open').on('click',function(event){
$(this).siblings('.ranch').toggle();
});
JSBin: http://jsbin.com/fiwosigike/1/edit?html,css,js,output

You need to handle the button within each div separately
$('.open').on('click',function(event){
$(this).next('p').toggle();
});

This will do it. You have to use this to toggle only one item.
$('.open').on('click',function(event){
event.preventDefault();
$(this).next('.ranch').toggle();
});

try this.
$( ".open" ).click(function() {
$(this).next(".ranch").slideToggle( "slow", function() {
// Animation complete.
});
});
.content{
width:400px;
background-color:orange
}
.ranch{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
<div class="content">
<button class="open">See More</button>
<p class="ranch">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste illum, pariatur ipsa, harum explicabo enim sed temporibus. Autem sint recusandae eligendi, doloremque illum rem possimus odit non deserunt libero!</p>
</div>
</body>
</html>

Related

Click in an html tag and display another that is initially hidden

Each <p> are hidden on initial load and I want to click on the <h3> then want the p-tag to show using Javascript.
I have a section in my HTML that looks as follow
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
My question is how do you reference the following div (or in this case p-tag) given the H3 you pressed?
If you press the H3 under #history then only that p-tag must show and the same with the other divs. But how do you do this in Javascript without duplicating code with different id's or classes.
My approach avoid the use of inline JS inside HTML, which is a bad practice.
Select all <h3> that are clickable and should open the <p> tags, then add the listener to them all.
Now, all you need is the function using this, that refers to the clicked h3, get it's sibling element, check if it is displaying or not, and do the toggle.
See below code
openFunction = function(ev) {
let pTagElem = this.nextElementSibling
if (pTagElem.style.display == "inline") {
pTagElem.style.display = "none"
} else {
pTagElem.style.display = "inline"
}
}
//select all <h3> that should be clickable (inside bio-sections divs)
let h3s = document.querySelectorAll("#bio-sections div h3")
//add the listener to them all
for (let h3 of h3s) {
h3.onclick = openFunction
}
#bio-sections div p {
display: none
}
#bio-sections div h3 {
cursor: pointer
}
<div id="bio-sections">
<div id="history">
<h3>My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
you can use javascript parameters like this, and move the id into the p tag
<div>
<h3 onclick="openFunction('history')">My History</h3>
<p id="history">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<script>
function openFunction(id) {
document.getElementById(id).show()
}
</script>
You can use closest() and delegation.
const container = document.querySelector("#bio-sections");
container.addEventListener("click", function (event) {
const parentSectionDiv = event.target.closest(".section");
if (parentSectionDiv !== null) {
parentSectionDiv.querySelector("p").classList.remove("hidden");
}
});
.hidden {
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<title>Sign in & Sign up Form</title>
</head>
<body>
<div id="bio-sections">
<div id="history" class="section">
<h3>My History</h3>
<p class="hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias
hic officia dolor quidem maiores quasi architecto veritatis obcaecati
debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum
quae!
</p>
</div>
<div id="schooling" class="section">
<h3>My Schooling</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure
distinctio voluptatum non quia maxime numquam amet eum at, quo ut
iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.
</p>
</div>
<div id="work" class="section">
<h3>My Work experience</h3>
<p class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore
porro natus voluptates nam, consectetur corporis vitae eius hic sed ea
earum.
</p>
</div>
<div id="hobbies" class="section">
<h3>My Hobbies</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
perspiciatis ipsam suscipit voluptas ab distinctio a doloribus,
dolorem officia iure nemo qui incidunt soluta dolores ratione saepe.
In, mollitia! Voluptatem!
</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
It depends a bit on how stable your HTML is, but if you are confident it remains like that you don't need to change it and can on the click get the p element.
There's several ways of doing this. This snippet gets the common parent and the first p element in it.
function openFunction() {
console.log(event.target);
console.log(event.target.parentElement.querySelector('p:first-of-type'));
}
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>

Need to access all text within the divs and change the color of the text to white

I'm having trouble acessing all the text within the divs including h and p tags and changing the text color to white. The button should toggle ALL the text within the page to the color white. I tried using querySelectorAll("div textContent") but it's not working.
var $ = function (id) {
return document.getElementById(id);
};
var textColorWhite = function(){
for (var el of document.querySelectorAll("div textContent"))
el.classList.toggle("fontColorWhite");
}
window.onload = function () {
$("textColor").addEventListener("click", textColorWhite);
}
.fontColorWhite{
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<div>
<h1>One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis magni reprehenderit quibusdam ipsam eius odit iste consequatur necessitatibus voluptatibus deserunt maxime esse, similique, cupiditate facere quis quos id delectus est.</p>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magni voluptatibus tempore aut corrupti, ducimus optio consequuntur. Quasi debitis a dicta natus voluptas alias ea, quis excepturi ut, eius accusantium.</p>
</div>
<section>
<button type="button" id="textColor">Change Text Color</button>
</section>
</main>
<script src="main.js"></script>
</body>
</html>

Incompatibility between Jquery 2 div [hide-show]

My second <div> is shown when page is refreshed and I want to avoid this.
$(function(){
$("#div2").hide();
$("button").click(function(){
$("#div1").hide()
$("#div2").fadeIn(1000)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
<button id="button">Click</button>
</div>
<div id="div2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>
Instead of hiding div2 by hide() function use css for it.
#div2 { display:none; }
and change your script code missing ; in code
<script>
$(function(){
$("button").click(function(){
$("#div1").hide();
$("#div2").fadeIn(1000);
});
});
</script>
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function()
{
$("#div2").hide();
$("button").click(function(){
$("#div1").hide()
$("#div2").fadeIn(1000)
});
});
</script>
</head>
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
<button id="button">Click</button>
</div>
<div id="div2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>
</html>
you only need jquery to run your code
$(document).ready(function() {
$("#div2").hide();
$("#button").click(function(){
$("#div1").hide();
$("#div2").fadeIn(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>
<button id="button">Click</button>
<div id="div2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

Calling External JS Link in PHP

I have 3 files for css, js, and php(which is more on html but i decided to put the php extension instead)
The project I'm trying to make is an interactive Menu that has a Page Flip action. I was able to find a reference in codepen. However, when I tried to apply it to my end, the animation and the text where not functioning the way I need it to be, although it works on codepen
The codes I used can also be find on the link i mentioned above. I just wanna ask how to properly call the external link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js and https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js on the menu.php file?
This is how I did it on sublimetext. I am not sure if it is just the positioning of my files. the result on what I did is that all the text are all centered and no page flip occurring. Thanks for the help
Menu.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sakurajima Menu</title>
<link href="css/styles2.css" rel="stylesheet">
<script src="js/main2.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/sakura-favicon.png"/>
</head>
<body>
<div class="container">
<div class="book-wrapper">
<div class="book-cover">
<img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
</div>
<div class="pages-container">
<div class="pages">
<div class="page-num-1">
<div class="pages-content">
<div class="pages-background"></div>
<div class="content-inner">
<h1>Chapter 1</h1>
<div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
</div>
</div>
</div>
<div class="page-num-2">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 2</h1>
<div class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? Fugit iste voluptatum atque voluptatibus totam! Nisi accusantium saepe hic. Aut nobis nesciunt mollitia error.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod natus, excepturi quae minus voluptatum cupiditate quia magnam eveniet ex, reiciendis voluptates ipsam iste laudantium!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
</div>
</div>
</div>
</div>
<div class="page-num-3">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 3</h1>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
</div>
</div>
</div>
</div>
<div class="page-num-4">
<div class="pages-content">
<div class="content-inner">
<h1>The End</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Put first the vendor libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/main2.js" type="text/javascript"></script>

How to toggle a specific div class inside loop

I'm finding no exact word to make you understand. I better show you my code:
<?php while($row=mysqli_fetch_array($res)){ ?>
<button class="btn<?php echo $row['id']; ?>">Button</button>
<p hidden class="area<?php echo $row['id']; ?>">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae vero perspiciatis atque praesentium animi, non? Voluptatem, tempora fugiat quos animi facilis facere obcaecati enim reiciendis excepturi sunt! Ducimus, modi!
</p>
<?php } ?>
<script>
$('.btn').click(function(){ // Can't set the specific number beside .btn
$('.area').show(); // Can't set the specific number beside .area
});
</script>
I want to make my work done for specific class. No idea how I can get the exact classname from and tag.
I expect:
<script>
$('.btn1').click(function(){
$('.area1').show();
});
$('.btn2').click(function(){
$('.area2').show();
});
$('.btn3').click(function(){
$('.area3').show();
});
--------------- and so on -------------
</script>
Hope you understand this.
If you have the exact HTML, assign a common class i.e. btn and area and then use DOM relationship to target the desired element.
<button class="btn">Button</button>
<p class="area">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae vero perspiciatis atque praesentium animi, non? Voluptatem, tempora fugiat quos animi facilis facere obcaecati enim reiciendis excepturi sunt! Ducimus, modi!
</p>
Script
$('.btn').click(function(){
$(this).next('.area').toggle();
});
However if you don't have the exact HTML, you can still use a common class to bind event handler using custom data-* attribute.
<button class="btn" data-target=".area<?php echo $row['id']; ?>">Button</button>
<p class="area<?php echo $row['id']; ?>">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni beatae vero perspiciatis atque praesentium animi, non? Voluptatem, tempora fugiat quos animi facilis facere obcaecati enim reiciendis excepturi sunt! Ducimus, modi!
</p>
then use
$('.btn').click(function(){
$($(this).data('target')).toggle();
});

Categories