I want to see (display as block) #link1 when the page opens. Is there a way to do this with css and html? or if there is not, how can I do this with javascript?
.tab div {
display: none;
}
.tab div:target {
display: block;
}
<div class="tab">
Link 1
Link 2
Link 3
<div id="link1">
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.tab div {
display: none;
}
.tab div[opened] {
display: block;
}
</style>
</head>
<body>
<div class="tab">
Link 1
Link 2
Link 3
<div id="link1" opened>
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</div>
</div>
</body>
</html>
Add Event Listener on three links and add attribute opened to proper div. Or, you could use bootstrap or Material-ui collapse feature if you can use any css framework.
One approach is to trigger a click on the first .tab a.
Another would be set the url hash to #link1
document.querySelector('.tab a').click()
// OR
location.hash = 'link1';
.tab div {
display: none;
}
.tab div:target {
display: block;
}
<div class="tab">
Link 1
Link 2
Link 3
<div id="link1">
<h3>Content to Link 1</h3>
<p>Hello World!</p>
</div>
<div id="link2">
<h3>Content to Link 2</h3>
<h4>Great success!</h4>
</div>
<div id="link3">
<h3>Content to Link 3</h3>
<p>Yeah!</p>
</div>
</div>
Related
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>
This question already has an answer here:
How to create equal-height columns using Materialize and Flexbox?
(1 answer)
Closed 4 years ago.
I've got three panels, two on the left side and one on the right.
<div class="row">
<div class="col s6">
<div class="panel">
content1
</div>
<div class="panel">
content2
</div>
</div>
<div class="col s6">
<div class="panel">
content3
</div>
</div>
</div>
The content of my left two panels is variable and so is the size of the panels.
Now I want the height of the panel on the right be dependent on the size of the left panels i.e. they should be flush at the bottom like in this example:
Is it possible to solve this in pure css or do I need some js function for that?
Edit:
I'm using Materialize and I can't figure out how flexboxes work with Materialize.
If you use Bootstrap (v4.2.1) you can make use of the following:
html:
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<p>This is sample text</p>
</div>
</div>
<div class="row">
<div class="col">
<p>This is sample text</p>
<p>This is sample text</p>
<p>This is sample text</p>
<p>This is sample text</p>
</div>
</div>
</div>
<div class="col">
<p>This is sample text</p>
</div>
</div>
Please make sure you include Bootstrap in your project.
Here is some extra info regarding Bootstrap's grid system.
If you're not using bootstrap, you can achieve it with a simple flex layout
.container{
display: flex;
}
.row{
border: 1px solid black;
min-width: 100px;
padding: 10px;
flex-grow: 1;
margin: 10px;
}
.col{
display: flex;
flex-direction: column;
}
<div class="container">
<div class="col">
<div class="row">
1<br />
1<br />
1<br />
1<br />
</div>
<div class="row">
2<br />
2<br />
2<br />
</div>
</div>
<div class="col">
<div class="row">333</div>
</div>
</div>
I hope display flex solves your problem!
.row {
display: flex;
background-color: #343434;
}
.col {
flex: 1;
text-align: center;
align-items: center;
justify-content:center;
}
.s6 { background-color: #7dc242; }
.s7 { background-color: #ed1c24; }
<div class="row">
<div class="col s6">
<div class="panel">
content1
</div>
<div class="panel">
content2
</div>
</div>
<div class="col s7">
<div class="panel">
content3
</div>
</div>
</div>
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');
});
});
I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});
You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});
You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>
You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
In my html page there are few div tags and each of them is having <fieldset> and <legend>. Usually we use href for navigation from 1 page to other page
And I could like to navigate from one div tag to another div tage from using
href. Can any one help me how can I do it.
Clicking on Jump will take you to div#anchor1
Jump
<div id="anchor1">Your content goes here</div>
https://jsfiddle.net/1pwo1gqb/1/
All you have to use id and attach it to the a tag like this
.container{
height: 500px;
padding-top: 20px;
}
.nav{
position: fixed;
}
<div class="nav">
section 1
section 2
section 3
section 4
section 5
section 6
</div>
<div class="container" id="s1">
<h1>Section 1</h1>
</div>
<div class="container" id="s2">
<h1>Section 2</h1>
</div>
<div class="container" id="s3">
<h1>Section 3</h1>
</div>
<div class="container" id="s4">
<h1>Section 4</h1>
</div>
<div class="container" id="s5">
<h1>Section 5</h1>
</div>
<div class="container" id="s6">
<h1>Section 6</h1>
</div>
As #sandeep Nayak have explained,
<div id="div1"> some data Go to div 2 </div>
<div id="div2"> some data Go to div 1 </div>