The following code works to toggle visibility on and off, but I want to be able to hide any visible div and show only the one that is visible. Here is the HTML:
<div id="main">
<div id="hiddena">
</div>
<div id="hiddenb">
</div>
<div id="hiddenc">
</div>
<div id="hiddend">
</div>
<div id="hiddene">
</div>
</div>
<div id="buttona">
<button type=submit onclick="switchVisible('hiddena');"></button>
</div>
<div id="buttonb">
<button type=submit onclick="switchVisible('hiddenb');"></button>
</div>
<div id="buttonc">
<button type=submit onclick="switchVisible('hiddenc');"></button>
</div>
<div id="buttond">
<button type=submit onclick="switchVisible('hiddend');"></button>
</div>
<div id="buttone" class="tall">
<button type=submit onclick="switchVisible('hiddene');"></button>
</div>
And here is the script...
<script type="text/javascript">
function switchVisible(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
Does anyone have any suggestions or additions to the script that could accomplish this?
would it be a problem to hide all of them at once and then show up only the one you want?
function hide_them() {
var divsList = ["hiddena", "hiddenb", "hiddenc", "hiddend", "hiddene"]
divsList.forEach(function (element) {
element.style.visibility = "hidden";
});
}
finally, just call the hide_them function in the begining of your func:
function switchVisible(id) {
hide_them();
var e = document.getElementById(id);
e.style.display = 'block';
}
Another way is to select elements by tag, and hide them all (this is not pretty good way because when your code grows up, it may cause unwanted problems)
Few suggestions here
Never Mix your markup with javascript. You might consider binding the onclick at javascript by using addeventlistener or jQuery bind
Id should always be unique. If you want to have multiple elements the same name ,you might consider using class,because document.getelementsbyclassname always returns an array
3.In your show/hide logic, you are checking if the element is "block" or "none". When the element is displayed, by default element.style.display would be "" not "block"
check the following code snippet
function switchVisiblebyId(id){
var element=document.getElementById(id);
var displayStyle=element.style.display;
if(displayStyle==="" || displayStyle==="block"){
element.style.display="none";
}
else{
element.style.display="";
}
}
<div id="hiddena">
div1
</div>
<div id="hiddenb">
div2
</div>
<div id="hiddenc">
div3
</div>
<div id="hiddend">
div4
</div>
<div id="hiddene">
div5
</div>
<div id="buttona">button1
<button type=submit onclick="switchVisiblebyId('hiddena');"></button>
</div>
<div id="buttonb">button2
<button type=submit onclick="switchVisiblebyId('hiddenb');"></button>
</div>
<div id="buttonc">button3
<button type=submit onclick="switchVisiblebyId('hiddenc');"></button>
</div>
<div id="buttond">button4
<button type=submit onclick="switchVisiblebyId('hiddend');"></button>
</div>
<div id="buttone" class="tall">button5
<button type=submit onclick="switchVisiblebyId('hiddene');"></button>
</div>
Hope this helps
Related
I would like to make 3 buttons with each one make all the content div to display: none and depending on the button you have click one of the content div change to display: block. For example, If I click on the second button It will show only the second div content.
function showPanel(id) {
var elements = document.getElementsByClassName("content");
for (let i = 0; i < elements.length; i++) {
document.getElementById(i).style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>
<div class="content">
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p class="other">TEST2</p>
</div>
<div id="3" class="content ">
<p class="other">TEST3</p>
</div>
</div>
There's a couple of issues in your code. Firstly length is a property, not a method, so you don't need the () suffix to invoke it. Secondly, there's no className attribute in HTML. This should just be class. Lastly the parent container shares the same class as the elements you're hiding, so all the child elements get hidden, even if they have display: block applied to them.
With these issues corrected, your code would look like this:
function showPanel(id) {
var elements = document.getElementsByClassName("panel");
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('p1')">test1</button>
<button onclick="showPanel('p2')">test2</button>
<button onclick="showPanel('p3')">test3</button>
<div class="content">
<div id="p1" class="panel">
<p>TEST1</p>
</div>
<div id="p2" class="panel">
<p class="other">TEST2</p>
</div>
<div id="p3" class="panel">
<p class="other">TEST3</p>
</div>
</div>
However it's worth noting that using onX attributes is outdated and not good practice. A better solution would be to use unobtrusive event handlers and provide custom metadata to the event handler through data attributes placed on the elements.
The improved version of the logic would look like this:
let buttons = document.querySelectorAll('button');
let panels = document.querySelectorAll('.panel');
buttons.forEach(button => {
button.addEventListener('click', e => {
panels.forEach(panel => {
panel.style.display = panel.id === e.target.dataset.panel ? 'block' : 'none';
});
});
});
<button data-panel="1">test1</button>
<button data-panel="2">test2</button>
<button data-panel="3">test3</button>
<div class="content">
<div id="1" class="panel">
<p>TEST1</p>
</div>
<div id="2" class="panel">
<p class="other">TEST2</p>
</div>
<div id="3" class="panel">
<p class="other">TEST3</p>
</div>
</div>
No need for JS or Jquery. Instead of a button you can use an anchor tag. Then you calling with the anchor the id of the element. Last but not least you make the boxes hidden through CSS and use the :target selector to display the elements:
.content {
display: none;
}
.content:target {
display: block;
}
test1<br>
test2<br>
test3<br>
<div class="content-container">
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p class="other">TEST2</p>
</div>
<div id="3" class="content ">
<p class="other">TEST3</p>
</div>
</div>
Multiple issues.
Length can be calculated using elements.length and not elements.length()
You have given same class name to both the parent and the child divs. So hiding all elements with class name content will hide your whole parents itself. So after updating style.display = "block" to the required target, it will not work. Because your parent is already style.display = "none". So you should make a logic update there. So I changed the parent class name.
function showPanel(id) {
var elements = document.getElementsByClassName("content");
for (let i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
document.getElementById(id).style.display = "block";
}
<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>
<div>
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p class="other">TEST2</p>
</div>
<div id="3" class="content ">
<p class="other">TEST3</p>
</div>
</div>
A more elegant way I might approach a prob,problem like this would be to tie the panels and their triggers together using data-attributes. This way, you don't risk conflicts with other IDs that m ay be the same on the page (IDs should always be unique).
Before setting up my event listener, I would initialize an openPanel variable and set it to any panel that is already created with the active class name. Whenever we open a new panel, we will overwrite this variable vaklue, so we don't need to do a new querySelctor each time.
Then, in the CSS, rather than hiding all panels and then showing the one with the active class, we can write a single style that hides any panels without the active class using the :not negation selector.
This is how that would look (initializing this with panel #1 open by default, but you can simply remove the active class from it in the HTML if you don't want that):
let openPanel = document.querySelector('[data-panel-id].active');
document.addEventListener('click', e => {
if (e.target?.matches?.('[data-panel-target]')) {
const id = e.target.dataset.panelTarget;
if (id) {
const panel = document.querySelector(`[data-panel-id="${id}"]`);
if (panel) {
openPanel?.classList.remove('active');
panel.classList.add('active');
openPanel = panel;
}
}
}
})
[data-panel-id]:not(.active) {
display: none;
}
<button data-panel-target="1">test1</button>
<button data-panel-target="2">test2</button>
<button data-panel-target="3">test3</button>
<main>
<div data-panel-id="1" class="active">
<p>TEST #1</p>
</div>
<div data-panel-id="2">
<p>TEST #2</p>
</div>
<div data-panel-id="3">
<p>TEST #3</p>
</div>
</main>
I already submitted a separate solution with my preferred recommendation, but I wanted to provide an answer to your question using the same approach you started with so as not to deviate from the code you already have in place.
The code you already had in place was actually fairly close to working already. The main issue I saw was that you were using document.getElementById(i) where you should actually have been using elements[i]. We can improve this further though, by replacing the for loop with a for..of loop, and determining inline whether the current element being evaluated is the one we want to show. If so, we use 'block', otherwise 'none'.
After initializing our function, we can call it on one of our IDs within the JS to have one panel open by default. **It's also important that the parent of all these .content elements NOT contain the class name content as well, as that would conflict with your function. I have replaced that parent element with a simple <main>…</main> element.
Here is how I would achieve solving this using your existing approach:
function showPanel(contentId) {
const elements = Array.from(document.getElementsByClassName('content'));
for (const element of elements) {
element.style.display = element.id === contentId ? 'block' : 'none';
}
}
showPanel('1');
<button onclick="showPanel('1')">test1</button>
<button onclick="showPanel('2')">test2</button>
<button onclick="showPanel('3')">test3</button>
<main>
<div id="1" class="content">
<p>TEST1</p>
</div>
<div id="2" class="content">
<p>TEST2</p>
</div>
<div id="3" class="content ">
<p>TEST3</p>
</div>
</main>
I am looking to add multiple 'see more' buttons through out my page. At the moment when when I add a new one only the first button works and it breaks the second. So the first button works fine but when I've tried to copy this thumbnail over and make another one with the same see more details. The second button only changes the first thumbnails 'see more'
function toggle() {
let Text = document.getElementById('moreDetails');
if (Text.style.display == "none") {
Text.style.display = "block";
} else {
Text.style.display = "none";
}
}
document.getElementById("moreDetails").style.display = "none";
<div id="thumbnail-frame">
<div id="thumbnail" <div id="details">
<div id="moreDetails">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">More Details</button>
</div>
</div>
<div id="thumbnail-frame">
<div id="thumbnail" <div id="details">
<div id="moreDetails">
<h3> 002 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">More Details</button>
</div>
</div>
Main problem is that you can't have duplicate IDs on a page. Using classes works ok, or using relative position of your html elements.
function toggle(button){
// this works because the button is immediately after the "moreDetails" element it pertains to
let Text = button.previousElementSibling;
// this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
//let Text = button.parentElement.querySelector(".moreDetails");
if(Text.style.display == "none"){
Text.style.display= "block";
}
else {
Text.style.display = "none";
}
}
const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
moreDetailses[i].style.display = "none";
}
<div class="details">
<div class="moreDetails">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
<div class="details">
<div class="moreDetails">
<h3> 002 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
An id is only allowed to be used once per page, so that your toggle script will not work as expected when you have multiple elements with the same id.
To make it functional, and keep the required changes to a minimum, you should do the following:
switch id to class so the HTML is valid
allow your toggle button to pass along itself, for example onclick="toggle(this)"
move through the dom to get to the element you want to toggle (parentNode, firstChild etc.)
I am trying to refactor and make a performance wise code.
The idea of the code is to update the id or value of all element with id or value that needs to be updated that happens when an element has been removed / deleted
So what I am trying to do is get all element with Id or value inside a container element (which is possible to be nested in 2 to 4).
At the moment, I am using jQuery to this task. I added a class on every element that has Id and use jQuery .find() to get all of this element using the class I've assign to them .. which is I really hate about my code and wanted to change as well if there's another best way to do it.
So is there a fastest way and performance wise at the same time to do this task?
$("button").on("click", function(){
$($(this).val()).remove();
updateParagraph();
});
function updateParagraph() {
$(".paragraphs").each(function(index, data){
var dataId = data.id.split("-");
var idIndex = dataId[dataId.length-1];
var index = index + 1;
if (index != idIndex) {
dataId.splice(-1, 1);
dataId.push(index);
dataId = dataId.join("-");
$(this).attr("id", dataId);
setChildElementsId($(this), index)
}
});
}
function setChildElementsId(parent, inx) {
$(parent).find(".id-holder").each(function(index, data){
if (data.id) {
var dataId = data.id.split("-");
dataId.splice(-1, 1);
dataId.push(inx);
dataId = dataId.join("-");
$(this).attr("id", dataId);
if(isParagraph(data.tagName)) {
$(this).text(inx);
}
}
else if (data.value) {
var dataValue = data.value.split("-");
dataValue.splice(-1, 1);
dataValue.push(inx);
dataValue = dataValue.join("-");
$(this).val(dataValue);
}
});
}
function isParagraph(tagName){
return tagName == "P";
};
<div id="container-1" class="paragraphs">
<div id="header-container-id-1" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-1" class="id-holder">
<p id="id-1" class="id-holder">1</p>
</div>
<button value="#container-1" class="id-holder">delete</button>
</div>
<div id="container-2" class="paragraphs">
<div id="header-container-id-2" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-2" class="id-holder">
<p id="id-2" class="id-holder">2</p>
</div>
<button value="#container-2" class="id-holder">delete</button>
</div>
<div id="container-3" class="paragraphs">
<div id="header-container-id-3" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-3" class="id-holder">
<p id="id-3" class="id-holder">3</p>
</div>
<button value="#container-3" class="id-holder">delete</button>
</div>
<div id="container-4" class="paragraphs">
<div id="header-container-id-4" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-4" class="id-holder">
<p id="id-4" class="id-holder">4</p>
</div>
<button value="#container-4" class="id-holder">delete</button>
</div>
<div id="container-5" class="paragraphs">
<div id="header-container-id-5" class="id-holder">
<h4>Header</h4>
</div>
<div id="paragraph-container-id-5" class="id-holder">
<p id="id-5" class="id-holder">5</p>
</div>
<button value="#container-5" class="id-holder">delete</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If I understand your question correctly, you're looking to more elegantly identify which elements have an id of the form "__-id-#" or simply "id-#".
If this is the case, take a look at some more advanced jQuery selectors. One in particular which might meet your needs is the Attribute Contains Selector.
For instance, I think $(parent).find("[id*='id-']") might do what you're looking to do.
While I understand what you're attempting to do, I don't quite understand why you're doing this in the first place.
Unless there are restrictions that force you to structure your HTML like you did, well, don't. Aim for the simplest structure:
<div id="container-123" class="paragraphs">
<h4>Header</h4>
<p>1</p>
<button type="button">delete</button>
</div>
Remove the <div>s around the <h4> and the <p> unless you need them for some styling reason. The <button> doesn't need to know its ID, because it's a child element of the container, so you're delete handler could make use of that fact:
$(document.body).on("click", "button", function() {
$(this).closest('.paragraphs').remove();
});
If there are outside forces that require a specific ID (e.g. for linking to an anchor), keep that on the top container element. If your CSS targets elements by ID, refactor the CSS.
I would like to answer your question using javascript. In fact you don't need any of those id-s
I hope I'm not too late.
let buttons = Array.from(document.querySelectorAll(".id-holder"));
buttons.forEach(b => {
//for each button add an event listener
b.addEventListener("click", () => {
b.parentElement.parentElement.removeChild(b.parentElement);
resetNums();
});
});
function resetNums(){
// reseting the text inside the p
let btns = Array.from(document.querySelectorAll(".id-holder"));
btns.forEach((bt,i)=>{
let theP = bt.parentElement.querySelector("p");
theP.innerHTML = i+1;
})
}
<div>
<div>
<h4>Header1</h4>
</div>
<div>
<p>1</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header2</h4>
</div>
<div>
<p>2</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header3</h4>
</div>
<div>
<p>3</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header4</h4>
</div>
<div>
<p>4</p>
</div>
<button class="id-holder">delete</button>
</div>
<div>
<div>
<h4>Header5</h4>
</div>
<div>
<p>5</p>
</div>
<button class="id-holder">delete</button>
</div>
I have this html structure (very general), the id of the div is added dynamically, by a function that creates sequential objects made this way:
<div id="mydiv1">
<div> Stuff</div>
<div>
<button id="remove"></button>
</div>
</div>
The button "remove" should remove the div where he is, so I have to retrieve the id of the div to do it. I do not know how. How can you make using jQuery? thank you
<form>
<div id="mydiv1">
<div> Stuff</div>
<div>
<button id="remove"></button>
</div>
</div>
<div id="mydiv2">
<div> Stuff</div>
<div>
<button id="remove"></button>
</div>
</div>
</form>
I tried:
("#remove").click(function(event) {
var id = event.target.id;
}
But the result is: "remove" instead of "mydiv1" or "mydiv2"
You should use class instead of id for the buttons (id should be unique):
$('.remove').click(function() {
$(this).closest('div[id^="mydiv"]').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div id="mydiv1">
<div>Stuff 1</div>
<div>
<button class="remove">REMOVE</button>
</div>
</div>
<div id="mydiv2">
<div>Stuff 2</div>
<div>
<button class="remove">REMOVE</button>
</div>
</div>
</form>
EDIT: Updated to new code posted by OP
For mydiv2 change button like this:
$(".remove").click(function() {
var id = $(this).data('id');
$("#mydiv"+id).remove();
}
<button class="remove" data-id="2"></button>
Use $(this).parent('div') to get the first parent node of type <div>
$("#remove").click(function(event) {
var parent = $(this).parent('div');
parent.remove();
}
EDIT
So add a class to your divs, let say .divRow for example
<form>
<div id="mydiv1" class="divRow">
<div> Stuff</div>
<div>
<button id="remove"></button>
</div>
</div>
<div id="mydiv2" class="divRow">
<div> Stuff</div>
<div>
<button id="remove"></button>
</div>
</div>
</form>
and your javascript would be in this case
$("#remove").click(function(event) {
var parent = $(this).parent('.divRow'),
id = parent.attr("id");
alert(id);
parent.remove();
}
Try
$('.remove').click(function() {
var id = $(this).parent().parent().attr('id');
//This will give you the id
});
For the next part of your question try this:
$(document).on('click','.remove',function() {
var id = $(this).parent().parent().attr('id');
//This will give you the id
});
My html page content is below
<div>
<div>
Summary 1
</div>
<div style="display:none">
Details 1
</div>
<button>Read More</button>
</div>
Details content is collapsed initially. When user clicks the Read More button, I need to show details content. I can make it possible. i will define id for details div tag and javascript for onclick event of button. Using id i will change the div style display.
But i have multiple list of sections based on the back end data. so my page would be renderd like below
<div>
<div>
Summary 1
</div>
<div style="display:none">
Details 1
</div>
<button>Read More</button>
</div>
<div>
<div>
Summary 2
</div>
<div style="display:none">
Details 2
</div>
<button>Read More</button>
</div>
<div>
<div>
Summary 3
</div>
<div style="display:none">
Details 3
</div>
<button>Read More</button>
</div>
Now How can i acheive the expand and collapse functionality when Read More button is clicked.
Using plain javascript and with the strategic addition of some classes, you could do this which would make each button into a toggle that even changes it's text according to the toggle state. Then one piece of javascript would serve for all the repeated instances of this structure and the code would be independent of the exact HTML layout of the summary, details and button (as long as they retained the same classes and were in the same container div.
HTML:
<div>
<div>
Summary 1
</div>
<div class="details" style="display:none">
Details 1
</div>
<button class="readMore">Read More</button>
</div>
<div>
<div>
Summary 2
</div>
<div class="details" style="display:none">
Details 2
</div>
<button class="readMore">Read More</button>
</div>
<div>
<div>
Summary 3
</div>
<div class="details" style="display:none">
Details 3
</div>
<button class="readMore">Read More</button>
</div>
And the javascript:
function toggleVis(el) {
var vis = el.style.display != "none";
if (vis) {
el.style.display = "none";
} else {
el.style.display = "block";
}
return(!vis);
}
(function() {
var readMore = document.getElementsByClassName("readMore");
for (var i = 0; i < readMore.length; i++) {
readMore[i].onclick = function(e) {
var vis = toggleVis(e.target.parentNode.getElementsByClassName("details")[0]);
e.target.innerHTML = vis ? "Read Less" : "Read More";
}
}
})();
Working Demo: http://jsfiddle.net/jfriend00/aMBkJ/
Note: This would require a shim for getElementsByClassName() on older versions of IE.
By using jQuery .prev() you may achieve it easily.
$('button').on('click', function(e){
$(this).prev('div').toggle();
});
DEMO
You can try this with jquery
<button class="readmore">Read More</button>
jQuery
$('.readmore').click(function(){
$(this).prev().show();
});
Here it is how you do it using jquery:
The HTML code:
<div class="stuff">
<dl id="faq">
<dt>What shouldn't I do to the bird?</dt>
<dd>Never try to treat a fracture at home.</dd>
</div>
The JQuery code:
jQuery(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function(){
$(this).next().slideToggle();
});
});