I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.
var checkbox = document.querySelector("input[name=toggle]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("on-toggle").style.display = "block";
document.getElementById("on-toggle").style.height = "auto";
} else {
document.getElementById("on-toggle").style.display = "none";
document.getElementById("on-toggle").style.height = "0";
}
<div id="switch">
<h2 id="CTA-switch">Turn creativity on </h2>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle">
<i class="bulb">
<span class="bulb-center"></span>
<span class="filament-1"></span>
<span class="filament-2"></span>
<span class="reflections">
<span></span>
</span>
<span class="sparks">
<i class="spark1"></i>
<i class="spark2"></i>
<i class="spark3"></i>
<i class="spark4"></i>
</span>
</i>
</label>
</div>
</div>
<div id="on-toggle">
<div id="references">
<h1>REFERENCE SITES</h1>
</div>
</div>
</div>
You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.
Related
This question already has answers here:
Can I change an HTML element's type?
(9 answers)
Closed 4 months ago.
I want help making the java script code to use an icon and when i click the icon the <a>exemple</a> to <textarea>exemple</textarea>
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="convertElement()"></i> <--- click here
<div class="services-item__content">
<h4 class="services-item__tp-title mb-30">
Exemple <--- change this to textarea with the same text
</h4>
</div>
</div>
This function should replace the <a> with a <textarea>
function update_function(event) {
// from the parent of the event target find the child that is parent to the element you want to replace
let parent = event.target.parentNode.querySelector("div > h4")
// get the target element
let target = parent.querySelector("a")
// store the current value
let text = target.innerText
// remove the old item
parent.removeChild(target)
// create, populate and append the new element to the stored parent
let el = document.createElement("textarea")
el.appendChild(document.createTextNode(text))
parent.appendChild(el)
}
You can hide and show the elements. Something like this
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i> <--- click here
<div class="services-item__content">
<h4 class="services-item__tp-title mb-30">
<textarea id="textarea-123" style="display: block;"></textarea>
Exemple <--- change this to textarea with the same text
</h4>
</div>
</div>
<script>
function update_function() {
document.getElementById('anchor-123').style.display = 'none';
document.getElementById('textarea-123').style.display = 'block';
}
</script>
You can try this way to solve this problem
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i>
<div class="services-item__content">
<h4 class="services-item__tp-title mb-30" id='demo'>
<a href="" id='myAnchor'>Exemple</a>
</h4>
</div>
</div>
<script>
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
const myElement = document.getElementById("demo");
myElement.innerHTML = "<textarea>exemple</textarea>";
});
</script>
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
I am trying to figure out what button a user has clicked inside a DIV container, but I must be doing something wrong here. I keep getting a no attributes error. Can anyone tell me if I am doing something wrong? Here is my JS:
// Bind ButtonClicks
$('#jplayers .button').on("click",function(e){
alert("Class :" + e.attr("class"));
// Determin what button
if( e.attr("class").indexOf("play") > 0 ){
// Play Clicked
player.jPlayer("play");
}else{
// Pause Clicked
player.jPlayer("pause");
}
});
Here is my HTML:
<div id="jplayers">
<!--First Player-->
<div id="zen_1">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
<!--Second Player-->
<div id="zen_2">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
</div>
Thanks for any help
You can get the class by using this.
$(this).attr("class")
The e that you're using isn't the element but the click event.
$('#jplayers .button').on("click",function(e){
alert("Class :" + $(this).attr("class"));
});
Here in your case you can make use of the e parameter in the callback method in the click event.
e.target returns the respective element this being clicked by the user.
$('#jplayers').on("click", function (e) {
// using this you can access the specific element
var className = $(e.target).prop('class');
if (className.indexOf("play") !== -1 || className.indexOf('pause') !== -1) {
alert(className);
// you can access it using $(e.target)
}
});
JSFiddle (with a simple sample code)
I'm looking for a solution to change multiple buttons to an unchecked state each time a button is clicked. Here's the div
<div id="season" align="center">
<span class="yui-button yui-radio-button yui-button-checked yui-radio-button-checked" id="season">
<span class="first-child">
<button type="button" id="season-button">Spring</button>
</span>
</span>
<span class="yui-button yui-radio-button" id="season">
<span class="first-child">
<button type="button" id="season-button">Summer</button>
</span>
</span>
<span class="yui-button yui-radio-button" id="season">
<span class="first-child">
<button type="button" id="season-button">Fall</button>
</span>
</span>
<span class="yui-button yui-radio-button" id="season">
<span class="first-child">
<button type="button" id="season-button">Winter</button>
</span>
</span>
</div>
I can access the buttons by doing:
var groupName = document.getElementById(id).getElementsByTagName("button")
but if I try
for (i = 0; i < groupName.length; i++) {
groupName[i].set("checked", false);
}
nothing happens
Any help is greatly appreciated!
Thanks!
Checked isn't a valid attribute for <button>'s. If you want radio like buttons, use <input type="radio"> and style them like buttons. Take a look at the official YUI Grouped Button example for how to do this.
i've a little javascript that let me show and hide some textareas.
i start with 1 textarea shown and the other 4 hidden with property display:none;
the first textarea is shown correct, but when i run the javascipt to hide thhe first and show one of the other textareas, the cols property is not readed and the textarea is shown small.
Here is the js code:
<script language="javascript">
function collapser(tab_id) {
document.getElementById("new_page_content_it").style.display = "none";
document.getElementById("new_page_content_en").style.display = "none";
document.getElementById("new_page_content_fr").style.display = "none";
document.getElementById("new_page_content_es").style.display = "none";
document.getElementById("new_page_content_de").style.display = "none";
document.getElementById(tab_id).style.display = "block";
}
</script>
And here there is the html:
<div id="new_page_tab_container">
<a href="#" OnClick="javascript:collapser('new_page_content_it')">
<div id="new_page_tab_it">Italian</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_en')">
<div id="new_page_tab_en">English</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_fr')">
<div id="new_page_tab_fr">French</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_es')">
<div id="new_page_tab_es">Spanish</div>
</a>
<a href="#" OnClick="javascript:collapser('new_page_content_de')">
<div id="new_page_tab_de">German</div>
</a>
</div>
<div id="new_page_content_it">
<textarea name="content_it" id="content_it" cols="90" rows="40">italian</textarea>
</div>
<div id="new_page_content_en">
<textarea name="content_en" id="content_en" cols="90" rows="40">english</textarea>
</div>
<div id="new_page_content_fr">
<textarea name="content_fr" id="content_fr" cols="90" rows="40">french</textarea>
</div>
<div id="new_page_content_es">
<textarea name="content_es" id="content_es" cols="90" rows="40">spanish</textarea>
</div>
<div id="new_page_content_de">
<textarea name="content_de" id="content_de" cols="90" rows="40">german</textarea>
</div>
<div id="new_page_save">
<input type="submit" value="Salva"/>
</div>
The css define content_it visible but any other content_xx as display:none;
why the cols property is not readed? but most important... how to get rid of this problem?
Thanks!
As a start I would recommend you to validate your HTML. For instance you have div elements (block elements) inside anchor elements (inline elements) which is not valid. If you use Firefox I can recommend this HTML validator plugin:
http://users.skynet.be/mgueury/mozilla/