I am completely lost here.
I am trying to have a visibility toggle for called multiple elements with consecutively numbered IDs. The Class is already used for another function. I want the script to run a loop to get all elements that have the set ID and consecutive number to toggle visibility.
this is the code I have.
<div>
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" />
<label for="angels"><span>Hide Angels</span>
</label>
</div>
<div id="angelT1" style="display:block">angel1</div>
<div id="angelT2" style="display:block">angel2</div>
<div id="angelT3" style="display:block">angel3</div>
<div id="angelT4" style="display:block">angel4</div>
<div id="angelT5" style="display:block">angel5</div>
<div id="angelT6" style="display:block">angel6</div>
And this is the script.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
Try this:
function toggle_visibility(prefix) {
var i = 0;
var e = null;
do {
++i;
var id = prefix + i;
e = document.getElementById(id);
if (e)
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
} while (e);
}
Example: http://codepen.io/paulroub/pen/lhHby
The id selector is very specific, and none of the ids on your elements will match. You may be better off using a common class to accomplish this:
<div>
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" />
<label for="angels"><span>Hide Angels</span>
</label>
</div>
<div id="angelT1" class="angelT" style="display:block">angel1</div>
<div id="angelT2" class="angelT" style="display:block">angel2</div>
<div id="angelT3" class="angelT" style="display:block">angel3</div>
<div id="angelT4" class="angelT" style="display:block">angel4</div>
<div id="angelT5" class="angelT" style="display:block">angel5</div>
<div id="angelT6" class="angelT" style="display:block">angel6</div>
<script type="text/javascript">
function toggle_visibility(className) {
var e = document.getElementsByClassName(className);
for (var i = 0; i < e.length; i++) {
if (e[i].style.display == 'block') e[i].style.display = 'none';
else e[i].style.display = 'block';
}
}
</script>
I believe that using jquery now solve this way
$( "div[id^='"+id+"']" ).toogle();
https://api.jquery.com/attribute-starts-with-selector/
http://api.jquery.com/toggle/
Related
I would like to hide the content of my form until the button is clicked, the code I am using shows content until clicked, I am starting out so probably missing something simple, any help appreciated, the code I am using is:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
you must add "display: none;" to "myDiv" property in css file then you can use your func
I think this is what you need
Heres the code:
document.getElementById("myButton").onclick = function() {
document.getElementById("myInput").style.display = "block";
}
<form>
<input type="text" id="myInput" style="display: none;">
</form>
<button id="myButton">Click</button>
Try this :
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none" || x.style.display == "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
border:solid 1px #c0c0c0;
padding:10px;
display:none;
}
<input type="button" onclick="myFunction();" value="switch" /><br>
<div id="myDIV">Welcome</div>
Because, if display is decalred in css to none (or whatever but not in DOM element) then javascript will "see" it like empty string. Or, set in <div id="myDIV" style="display:none;"></div>.
By my opinon, first code is better choice.
there is an example
<button id="tri" style='display: block;'>add</button>
<div id="box" style='display: none;' >
tracked by id
$('#tri').on('click', function(){
var e = document.getElementById('box');
var b = document.getElementById('tri');
if(e.style.display == 'none')
$("#box").slideDown();
b.style.display = 'none';
})
need to do the same so that this button tracks but only class and data-id
<div class="block_view" data-id="52" style='display: none; ></div>
what i tried did not work
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" style="display: none;" data-id="51"></div>
<script>
$('body').on('click', '.editblock', function() {
var $this = $(this),
id = $this.attr('data-id');
var b = $('.block_view[data-id=id]');
if(b.style.display == 'none')
b.style.display = 'block';
})
</script>
what am I doing wrong?
The variable id contains dynamic data but you are using that as a string, you should form the selector in a proper way.
b refers to a jQuery element, you should use .css() instead of style property.
Try the following way:
$('body').on('click', '.editblock', function() {
var $this = $(this),
id = $this.attr('data-id');
var b = $('.block_view[data-id='+id+']');
if(b.css('display') == 'none')
b.css('display', 'block');
else b.css('display', 'none');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="editblock" data-id="51">edit</button>
<div class="block_view" data-id="51" style='display: none;' >block_view</div>
You have to insert the id variable in to selector, you are just putting the literal sting id in it. Also jQuery returns a jQuery object not an element, so you can use document.querySelector instead.
var b = document.querySelector('.block_view[data-id="'+id+'"]');
You can take data-id using $(this).data('id'); and the style by $(this).css("display"). you can find all div with the data-id and show/hide based on that
$(".editblock").click(function() {
var id=$(this).data('id');
console.log(id)
var styles = $(this).css("display");
console.log(styles)
$("div").each(function(){
if($(this).attr('id') == id && $(this).css("display")=="none") {
$(this).css('display','block');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" >
<div id="51" style="display:none">div1</div>
<div id="52" style="display:none">div2</div>
<div id="53" style="display:none">div3</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" style="display: none;" data-id="51"></div>
<div class="block_view" data-id="51" style='display: none;'>Demo</div>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$('.editblock').click(function(){
var id = $(this).attr('data-id');
var b = $('.block_view[data-id='+id+']');
if($(b).css('display')=='none'){
$(b).css('display','block')
}
});
</script>
</html>
I have two div's A and B, I looking example to switch between them without reloading a page, for example onclick a first button show only div A, second button show only Div B, and third button show all A and B div's
<div id="A" style="dispay:none">
<p> this is div 1 </p>
</div>
<div id="B" style="dispay:none">
<p> this is div 2 </p>
</div>
<input type="button" value="showA" onclick="showA()">
<input type="button" value="showA" onclick="showB()">
<input type="button" value="showA" onclick="showAB()">
<script>
var showA = function()
{
document.getElementById('A').style.display = 'block';
document.getElementById('B').style.display = 'none';
}
var showB = function()
{
document.getElementById('B').style.display = 'block';
document.getElementById('A').style.display = 'none';
}
var showAB = function()
{
document.getElementById('A').style.display = 'block';
document.getElementById('B').style.display = 'block';
}
</script>
My html code looks like this:
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" style="display:'none';">
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" style="display:'none';"></div>
</div>
and this is my js code:
function toggle_visibility(id) {
var x = document.getElementById(id); {
if(x.style.display == 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
The question is, How can I make these divs to be "when one div is visible, the other one is hidden" ?
sorry for my bad English lang :# :3
Firstly add a class to each of the divs here i have it as container
then hide all of them, and show the 1 specific div
<div id="register" class="dropdown">
<button id="regbutton" href="#" onclick="toggle_visibility('container1');">show1</button>
<div id="container1" class='container' style="display:none;">test
</div>
</div>
<div id="login" class="dropdown">
<button id="loginbutton" href="#" onclick="toggle_visibility('container2')"><b>Masuk</b></button>
<div id="container2" class='container' style="display:none;">test
</div>
</div>
<script>
function toggle_visibility(id) {
var x = document.getElementById(id);
var divsToHide = document.getElementsByClassName('container'); //divsToHide is an array so we loop through them
for(var i = 0; i < divsToHide.length; i++){
divsToHide[i].style.display = "none";
}
x.style.display = 'block';
}
</script>
If you only need these two divs, you can simply use their div id's and a simple conditional:
function toggle(divNumber) {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (divNumber == 1) {
div1.style.display = 'none';
div2.style.display = 'block';
} else {
div2.style.display = 'none';
div1.style.display = 'block';
}
}
Fiddle:
https://jsfiddle.net/8480twew/
I'm building an about us page and I'm hoping to use JavaScript to show/hide/replace a DIV's content with a vision statement or a bio depending on which is clicked by the user. I'm brand new to using script, so I'm hoping there is someone who has done this before.
I currently have a button for the bio and one for the vision and while I'm able to show and hide text with no problem I have no clue how to replace the DIV so that the Bio and Vision don't show at the same time.
Here is what I have so far:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
<button type="button" onclick="javascript:showhide('vision')">Vision</button>
<button type="button" onclick="javascript:showhide('bio')">Bio</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
I'd also like the button text to change to "Hide Bio" or "Hide Vision" depending on which is revealed as well.
If anyone could help with this it would be GREATLY appreciated for a Java Noob like me.
This is also my first time using a forum like this so any pointers or feedback is appreciated...gotta start somewhere, right?
UPDATE - I attached an image to give a better idea of what I'm try to accomplish.
There are a couple of issues with logic. If you show/hide one div, you'll still need to hide/show the second div. So you can either add more lines of code to do that.. or simply you can use one div and update its content based on the button clicked.
so you can try this:
<script>
var textStrings = {"author1": {"Vision":"this is author1 vision", "Bio":"this is author1 bio"},
"author2": {"Vision":"this is author2 vision", "Bio":"this is author2 bio"},
"author3": {"Vision":"this is author3 vision", "Bio":"this is author3 bio"}};
function showhide(element) {
reset();
var id=element.id;
var author = document.getElementById("authors").elements["authors"].value;
var flag = document.getElementById('content').innerHTML == textStrings[author][id];
document.getElementById('content').innerHTML = flag ? "" : textStrings[author][id];
element.innerHTML = flag ? id : "hide " + id;
}
function reset(){
for (var k in textStrings["author1"]){
document.getElementById(k).innerHTML = k;
}
}
function resetAuthor(){
document.getElementById('content').innerHTML = ""
reset();
}
</script>
<form id="authors">
<input type="radio" name="authors" id="author1" onchange="resetAuthor()" value="author1" checked> author 1
<input type="radio" name="authors" id="author2" onchange="resetAuthor()" value="author2"> author 2
<input type="radio" name="authors" id="author3" onchange="resetAuthor()" value="author3"> author 3
</form>
<div style="display:inline">
<button type="button" id="Vision" onclick="javascript:showhide(this)">Vision</button>
<button type="button" id="Bio" onclick="javascript:showhide(this)">Bio</button>
</div>
<div style="display: block;">
<p id="content"></p>
</div>
This code also toggles/set contents as empty if you hit the button again.
DEMO
Try to pass the this object into the inline event handler and check the content's display state to toggle the button's text,
HTML:
<button type="button" onclick="javascript:showhide('vision',this)">Vision</button>
<button type="button" onclick="javascript:showhide('bio',this)">Bio</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
JS
function showhide(id,elem) {
var e = document.getElementById(id);
var cond = (e.style.display == 'block');
e.style.display = cond ? 'none' : 'block';
elem.textContent = (id == "vision") ? (cond ? "Show Vision" : "Hide Vision")
: (cond ? "Show Bio" : "Hide Bio");
}
DEMO
Try this out.
var prevPage = "";
var currPage = "";
function showhide(event) {
prevPage = currPage;
currPage = event.id.split("_")[1];
if(prevPage !== currPage){
showEle(currPage);
if(prevPage !== ''){
hideEle(prevPage);
}
} else {
toggle(currPage);
}
}
function toggle(id){
var curr = document.getElementById(id);
if(curr.style.display === 'block'){
curr.style.display = 'none';
updateBtn('btn_'+id, 'Show');
} else {
curr.style.display = 'block';
updateBtn('btn_'+id, 'Hide');
}
}
function updateBtn(id, newStr){
var btn = document.getElementById(id);
btn.innerHTML = newStr + ' ' + btn.innerHTML.split(' ')[1];
}
function showEle(id){
document.getElementById(id).style.display = 'block';
updateBtn('btn_'+id, 'Hide');
}
function hideEle(id){
document.getElementById(id).style.display = 'none';
updateBtn('btn_'+id, 'Show');
}
<button id="btn_vision" type="button" onclick="showhide(this)">Show Vision</button>
<button id="btn_bio" type="button" onclick="showhide(this)">Show Bio</button>
<button id="btn_xyz" type="button" onclick="showhide(this)">Show Xyz</button>
<button id="btn_abc" type="button" onclick="showhide(this)">Show Abc</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
<div id="xyz" style="display: none;">
<p>This is my xyz</p>
</div>
<div id="abc" style="display: none;">
<p>This is my abc</p>
</div>
Note: You might want to initialize the currPage with the first page's id since it gives a better feel.
Say currPage = "vision" and also make display block for div id = "vision".