I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.
this is my flip cards
<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
this is my script for hide/show button
<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
i hope you can help me
I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.
Welcome to stackoverflow.
According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)
Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)
So we need to use a class instead of newpost id to target those elements.
Change the HTML to the following content — by formatting the code and fixing those errors:
<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>
Script:
This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.
<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>
Learn about HTML errors:
Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.
According to your Question , What I Understand you want something like this:=
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
http://jsfiddle.net/Rwx7P/3/
You have two blocks with same ID (button and newpost), it must be always diffrent on one page.
function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
Related
I have 2 divs on a block of content, one active and the other one is hidden.
I want to click on the div, hide the first one and show the second one.
Then when I click on the second one to hide it and show the first one.
I have however 12 more blocks with the same estructure and classes that need to have this functionality.
For the record I haven't make it work at all not even on one div.
<div class="feature-list-item">
<div class="first-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="second-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
And here is css:
.first-one {display:block;}
.second-one {display:none;}
I want to consider the easiest approach jquery, javascript it doesn't matter
Here is an example with isolated lists:
$(document).ready(function(){
$('.block').on('click', '.item', function(e){
$(this)
.removeClass('active')
.siblings('.item')
.addClass('active');
});
});
.blue .item {
background: blue;
}
.green .item {
background: green;
}
.item {
padding: 10px;
margin: 10px;
color: white;
display: none;
}
.item.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block blue feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 1<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 2<p/>
</div>
</div>
</div>
<div class="block green feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 3<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 4<p/>
</div>
</div>
</div>
This is the solution I found. Hide clicked and show next. I hope you are trying to show next but not specific one, if specific you trying to show then you gonna change the code.
DEMO HERE
HTML
<div class="click show">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
CSS
.show{
width:200px;
height:100px;
background-color:red;
}
.hidden{
display:none;
}
JS
$(document).ready(function(){
$('.click').click(function(){
$(this).removeClass('show');
$(this).addClass('hidden');
$(this).next('.hidden').addClass('show');
$(this).next('.hidden').removeClass('hidden');
});
});
Need help to show "default" picture in the imageHolder when pages is loaded in JavaScript and replaced whit picture from the button click.
<script type="text/javascript">
function changeImg(image) {
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="row">
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<p>
<onload="changeImg('0.jpg')">
</p>
<p id="imageHolder" "changeImg('/upload_dir/pics/Beo/BeoLab/3/BLa3-Black.jpg')"></p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('1.jpg')" style="background-color: #000;" title="sort">·</a>
</p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('2.jpg')" style="background-color: #d2d2d2;" title="sort">·</a>
</p>
</div>
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<div class="panel" id="pic" style=" background-color:#fff;">
<img id="imageHolder" / class="responsive">
</div>
</div>
</div>
I'm trying to create a box that is created without IDs.
I mean a box that slide out when I press on a button (also without IDs) and every other "moreinfo" text should not slide down.
Here is a example where I use IDs.
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){ //Only a smooth scroll funtion
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('#box1_more_btn').click(function() {
if($('#box1_more').css('display') == 'none') {
$('#box1_more_btn').text("less");
$('#box1_more').slideDown(400);
} else {
$('#box1_more_btn').text("more");
$('#box1_more').slideUp(400);
}
});
$('#box2_more_btn').click(function() {
if($('#box2_more').css('display') == 'none') {
$('#box2_more_btn').text("less");
$('#box2_more').slideDown(400);
} else {
$('#box2_more_btn').text("more");
$('#box2_more').slideUp(400);
}
});
.moreinfo {
display:none;
}
#box_1 {
color: black;
background-color: #F2F2F2;
}
#box1_more {
background-color: rgba(0,0,0,0.008)
}
#box_2 {
color: black;
background-color: #F2F2F2;
}
#box2_more {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div id="box_1" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span id="box1_more_btn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo" id="box1_more">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br /><br /><br />
<div id="box_2" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
Second box ... more<!-- This Button should also rename--> !
</p>
</div>
</div>
</div>
<div id="box2_more" class="container moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the second more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-2 end-->
</div>
</body>
So I imagine it without IDs.
I tried that, but do not know how to go
This is my attemp without using IDs:
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('.morebtn').click(function() {
if($('.moreinfo').css('display') == 'none') {
$('.morebtn').html(' less '); // Is it possible too, that the window scroll down to "this" div?
$('.box_moreinfo').slideDown(400);
} else {
$('.morebtn').html(' more ');
$('.box_moreinfo').slideUp(400);
}
});
.moreinfo {
display:none;
}
.box {
color: black;
background-color: #F2F2F2;
}
.box_moreinfo {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br />Now, both boxes slideOut on click...<br /><br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div><!-- BOX-2 end-->
</div>
</body>
Just looking at your markup you've made life quite difficult for yourself!
If this were something I was doing I'd make the relationship more explicit in the HTML:
<section class="has-more-info">
<h1>Header</h1>
<p>
Text here...
</p>
<button class="show-more-info">Show more</button>
<div class="more-info hidden">
<h3>More Info</h3>
<p>This is the first more Info box</p>
</div>
</section>
Then you could use:
$('.has-more-info').each( function() {
$(this).find('.show-more-info').click( function(e) {
e.preventDefault();
$(this).siblings('.more-info').slideToggle();
});
});
You need to style the .hidden class as display:none; initially, or onload so as to not impede non-JS users.
I haven't tested this but the concept should get you going.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have a requirement of toggling the color of a clicked <div> from red to green & green to red. I am using jquery in my page. Please suggest me the best possible code to fulfill the requirement.
My code is as follows:
<htmL>
<head>
<script src="jquery-1.10.2.js">
window.onload = initPage;
function initPage() {
}
function tileclick() {
}
</script>
<style>
div.table{
display: table;
}
div.row{
display: table-row;
border-style:solid;
border-color: black;
border-width:15px;
padding-top:35px;
padding-bottom:35px;
padding-right:50px;
padding-left:50px;
margin-top:25px;
margin-bottom:25px;
margin-right:50px;
margin-left:50px;
}
div.cell{
display: table-cell;
border-style: solid;
border-width:15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
padding-bottom: 30px;
font-weight:5000;
font-size:200%;
background: #00FF00;
}
</style>
</head>
<body>
<div id="table" class="table">
<div id="r1" class="row">
<div id="sys55" class="cell">55
</div>
<div id="sys56" class="cell">56
</div>
<div id="sys57" class="cell">57
</div>
<div id="sys58" class="cell">58
</div>
<div id="sys59" class="cell">59
</div>
<div id="sys60" class="cell">60
</div>
<div id="sys61" class="cell">61
</div>
<div id="sys62" class="cell">62
</div>
<div id="sys63" class="cell">63
</div>
<div id="sys64" class="cell">64
</div>
<div id="sys65" class="cell">65
</div>
</div>
<div id="r2" class="row">
<div id="sys54" class="cell">54
</div>
<div id="sys53" class="cell">53
</div>
<div id="sys52" class="cell">52
</div>
<div id="sys51" class="cell">51
</div>
<div id="sys50" class="cell">50
</div>
<div id="sys49" class="cell">49
</div>
<div id="sys48" class="cell">48
</div>
<div id="sys47" class="cell">47
</div>
<div id="sys46" class="cell">46
</div>
<div id="sys45" class="cell">45
</div>
<div id="sys44" class="cell">44
</div>
</div>
<div id="r3" class="row">
<div id="sys33" class="cell">33
</div>
<div id="sys34" class="cell">34
</div>
<div id="sys35" class="cell">35
</div>
<div id="sys36" class="cell">36
</div>
<div id="sys37" class="cell">37
</div>
<div id="sys38" class="cell">38
</div>
<div id="sys39" class="cell">39
</div>
<div id="sys40" class="cell">40
</div>
<div id="sys41" class="cell">41
</div>
<div id="sys42" class="cell">42
</div>
<div id="sys43" class="cell">43
</div>
</div>
<div id="r4" class="row">
<div id="sys32" class="cell">32
</div>
<div id="sys31" class="cell">31
</div>
<div id="sys30" class="cell">30
</div>
<div id="sys29" class="cell">29
</div>
<div id="sys28" class="cell">28
</div>
<div id="sys27" class="cell">27
</div>
<div id="sys26" class="cell">26
</div>
<div id="sys25" class="cell">25
</div>
<div id="sys24" class="cell">24
</div>
<div id="sys23" class="cell">23
</div>
<div id="sys22" class="cell">22
</div>
</div>
<div id="r5" class="row">
<div id="sys11" class="cell">11
</div>
<div id="sys12" class="cell">12
</div>
<div id="sys13" class="cell">13
</div>
<div id="sys14" class="cell">14
</div>
<div id="sys15" class="cell">15
</div>
<div id="sys16" class="cell">16
</div>
<div id="sys17" class="cell">17
</div>
<div id="sys18" class="cell">18
</div>
<div id="sys19" class="cell">19
</div>
<div id="sys20" class="cell">20
</div>
<div id="sys21" class="cell">21
</div>
</div>
<div id="r6" class="row">
<div id="sys10" class="cell">10
</div>
<div id="sys09" class="cell">09
</div>
<div id="sys08" class="cell">08
</div>
<div id="sys07" class="cell">07
</div>
<div id="sys06" class="cell">06
</div>
<div id="sys05" class="cell">05
</div>
<div id="sys04" class="cell">04
</div>
<div id="sys03" class="cell">03
</div>
<div id="sys02" class="cell">02
</div>
<div id="sys01" class="cell">01
</div>
</div>
</div>
</body>
</html>
My initial page should appear green in color as shown below.
Each block should toggle green to red when clicked & vice-versa.
Please help me achieve this requirement.
You can use a start with selector to match all you divs that id starts with sys and then use toggleClass to switch the classes.
Code:
$("div[id^='sys']").click(function(){
$(this).toggleClass("cell cell2");
});
Demo: http://jsfiddle.net/IrvinDominin/tsL8a/
Use toggleClass() in jquery
<style>
.red{
background : red;
}
</style>
$(function() {
$(".cell").on("click" , function(e) {
$(this).toggleClass("cell red");
});
});
You can use jQuery toggleClass method (See the doc).
Add a class for red cells like :
.red_cell {
background-color: red;
}
Then something like :
$('.cell').click(function() {
$(this).toggleClass('red_cell');
});
use:
$(".cell").click(function(){
var clr = $( this ).css("background-color").toString();
var clr = (clr == "rgb(0, 255, 0)" ? "rgb(255,0,0)" : "rgb(0, 255, 0)");
$(this).css({
"background":""+clr+""
});
});
without changing css markup.
DEMO. hope it'll help you. cheers !
$(".cell").click(function(){
if($(this).hasClass('red')) {
$(this).removeClass('red');
}else{
$(this).addClass('red');
}
});
and simply add a class to CSS.
I have the following script that shows/hides some text when an image is clicked. This text then is replaced when another image is clicked and so on. At the moment there is always some text visible.
I want this text to disappear (or perhaps display and empty div?) on mouseOut of the image.
Here is what I currently have:
JS:
<script type="text/javascript" language="JavaScript">
<!--
function showonlyonev2(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'textboxes') {
if (newboxes[x].id == thechosenone) {
if (newboxes[x].style.display == 'block') {
} else {
newboxes[x].style.display = 'block';
}
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
HTML:
<div id="text-container">
<div id="text1" name="textboxes">
<p>Some text here about person 1</p>
<div id="text2" name="textboxes">
<p>Some text here about person 2</p>
<div id="text3" name="textboxes">
<p>Some text here about person 3</p>
<div id="text4" name="textboxes">
<p>Some text here about person 4</p>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text1');" class="rollovers">
<div id="person1-rollover"><img src="images/people/person1.jpg" alt="" /> </div>
</a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text2');" class="rollovers">
<div id="person2-rollover"><img src="images/people/person2.jpg" alt="" /> </div>
</a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text3');" class="rollovers">
<div id="person3-rollover"><img src="images/people/person3.jpg" alt="" /> </div>
</a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text4');" class="rollovers">
<div id="person4-rollover"><img src="images/people/person4.jpg" alt="" /> </div>
</a>
</div>
CSS:
#text1 {
width: 300px;
height: 300px;
background: #c2bfba;
}
#text2, #text3, #text4 {
width: 300px;
height: 300px;
background: #c2bfba;
display:none;
}
Thanks for any help.
You could use this in the image tag:
<img src='...' onmouseover='javascript:showonlyonev2('text1')' onmouseout='javascript:showonlyonev2('blank')' />
This way your function gets called whenever the image is hovered over. you can create an empty div called 'blank' so that your function uses it when mouse out, so it appears blank.
Keep your Javascript the same.
Change your HTML to:
<div id="text-container">
<!-- All of these DIV's should have closing tags -->
<div id="text1" name="textboxes"><p>Some text here about person 1</p></div>
<div id="text2" name="textboxes"><p>Some text here about person 2</p></div>
<div id="text3" name="textboxes"><p>Some text here about person 3</p></div>
<div id="text4" name="textboxes"><p>Some text here about person 4</p></div>
<div id="blank" name="textboxes"><p> </p></div>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text1');" class="rollovers">
<div id="person1-rollover"><img src="images/people/person1.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text2');" class="rollovers">
<div id="person2-rollover"><img src="images/people/person2.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text3');" class="rollovers">
<div id="person3-rollover"><img src="images/people/person3.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text4');" class="rollovers">
<div id="person4-rollover"><img src="images/people/person4.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
Change your CSS to:
#blank {
width: 300px;
height: 300px;
background: #c2bfba;
}
#text1, #text2, #text3, #text4 {
width: 300px;
height: 300px;
background: #c2bfba;
display:none;
}
Let me know if that works for you.