I'm currently trying to figure out how to make a text area disappear while another one will appear instead.
I have no knowledge of javascript and I have just started learning the basics of HTML and CSS, is there a chance anyone from the forum can help me out or maybe guide me to the correct path.
I'm attaching the part of the code, to make it more clear.
When you click on "2.svg" it should change the "textarea.one's and three's" "display: block;" into "display: none;"
When you click on "3.svg" it should change the "textarea.two's and one's" "display: block;" into "display: none;"
When you click on "1.svg" it should change the "textarea.two's and three's" "display: block;" into "display: none;"
I hope this explanation is clear enough, I'm also not sure if I'm allowed to ask to provide full code on this forum without preparing anything on my own.
Thank you in advance to whoever will read this!
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header1" src="/2.svg" alt="Open Menu" class="menu">
<img id="header1" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
Read this: https://www.w3schools.com/jsref/prop_style_display.asp
In order to change an element's display property, you can access it like this:
document.querySelector("myelement").style.display = "theValueIWant";
Mind the different selectors
Now, what you want is when we click 2.svg to change textarea one and three's diplay property from block to none. First select these using document.querySelector("textarea.one") and then change the value: document.querySelector("textarea.one").style.display = "none";
Now, to call this javascript you need an event. You can use the onClick one. Simply
<img id="header1" onClick="document.querySelector('textarea.one').style.display = 'none';" src="/1.svg" alt="Open Menu" class="menu">
would change the display property of the textarea.one element on click.
Method I In order to call multiple elements, what I suggest is adding one more class to the two elements that you are going to hide, and the simply use the above code with changing the class. E.g., to textarea one and three add class hideOne and then hide the element with document.querySelector("hideOne").style.display = "none";
Method II Another way you can accomplish this, is by creating a function that would hide the two components. Create a script tag and then use the above selector to hide the two elements:
<script>
function hide1(){
document.querySelector('textarea.one').style.display = "none"
document.querySelector('textarea.three').style.display = "none"
}
</script>
Then call the function by inserting into the element to be clicked(your svg): onClick="hide1()"
That's it!
The following is a very short way of achieving the same without jQuery.
It is not as easy to read as the jQuery based solution but contains certain elements that might be interesting to you too:
I used a "delegated event attachment" which means I attached the click event handler to the parent element (the first div in the document) of the three <img> elements. Doing it this way keeps the document "fast" and makes it easily extendable by further elements.
I identify the clicked image by its id attribute: only if the clicked element has the tagName==="DIV" and its id starts with "header", I will take the remaining (id-string - 1) as the index to look-up the class name c in the cls array.
In the txtas.forEach() loop I will then make the <textarea> containing c in its classList visible, while all others will be hidden.
const cls=["one","two","three"],
txtas=document.getElementsByName("myInput");
document.querySelector("div").onclick=ev=>{ let el=ev.target;
if(el.tagName==="IMG"&&el.id.substr(0,6)==="header"){
let c=cls[el.id.substr(6)-1];
txtas.forEach(t=>t.style.display=t.classList.contains(c)?"":"none");
}
}
<div>
<img id="header1" src="/1.svg" alt="first" class="menu">
<img id="header2" src="/2.svg" alt="second" class="menu">
<img id="header3" src="/3.svg" alt="third" class="menu">
</div>
<div class="textniz">
<textarea class="one" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
I removed the id attributes from your <textarea> elements as they would have been dupes. The script works very well without them.
Impossible with just CSS but so easy with JQuery (which I think would be easier fo you to start as the semantic is much more read friendly for begginers than pure javascript)
like this:
$("#header1").click(function(){
$(".two").hide();
$(".three").hide();
$(".one").show();
});
$("#header2").click(function(){
$(".one").hide();
$(".three").hide();
$(".two").show();
});
$("#header3").click(function(){
$(".one").hide();
$(".two").hide();
$(".three").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header2" src="/2.svg" alt="Open Menu" class="menu">
<img id="header3" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
So as per your question, if it is just a quick switch and you want only one view to be active, it's better and easy to use jQuery because it is very direct, #Alvaro has already shared the quick code snippet. It's very easy to play around with jQuery.
Disclaimer: It makes your life so easy that if in case you try to learn a full seasoned framework, then there will be a long workaround. But get started with jQuery. You'll find it very interactive.
Happy Coding :)
Related
As mentioned in the title, jQuery does not select 3rd child for some reason. This problem is not occurring when I target first and second child element. I want to hide a paragraph which starts with "Gift Aid legislation..."
Is there any way to sort it?
HTML
<div class="pmpro_checkout-fields custom">
<p>
You have selected the <strong>Non-Member</strong> membership level.
</p>
<p>Need Text</p>
<div id="pmpro_level_cost">
<p>The price for membership is <strong>£0.00</strong> now.</p>
</div>
<br>
<span style="margin-top: -25px; display: block">
Details required on this form will also appear in the Directory Listing. Please read below. *Information required
</span>
<hr>
<h3>Gift Aid</h3>
<p>Gift Aid legislation allows us to reclaim 25p of tax on every £1 that you give on your subscription and additional donations. It won't cost you any extra.</p>
<input type="checkbox" id="gift_aid" name="gift_aid" value="1">
<label class="pmpro_normal pmpro_clickable" for="gift_aid">
Allow Gift Aid to be collected?
</label>
<hr>
</div>
Jquery
$( ".pmpro_checkout-fields h3" ).hide();
$(".pmpro_checkout-fields p:nth-child(3").hide();
$(".pmpro_checkout-fields p:nth-child(3").hide();
I guess there is syntax problem
$(".pmpro_checkout-fields p:nth-child(3)".hide();
First, the method Cbroe mentioned in the comments will get you working:
$(".pmpro_checkout-fields p:nth-of-type(3)").hide();
However, long term, I do not recommend this approach (manual indexes of element positions in a form), as it is fragile. As soon as you add another <p> element before the target, things break. If you refactor it, things could break silently. A more standard way would be to surround the elements that should disappear in a div or span with an ID, then target that ID in the jQuery, so that it will always work as long as you don't change the ID:
HTML snippet:
<div class="pmpro_checkout-fields custom">
...
<hr>
<div id="giftAid">
<h3>Gift Aid</h3>
<p>Gift Aid legislation allows us to reclaim 25p of tax on every £1 that you give on your subscription and additional donations. It won't cost you any extra.</p>
<input type="checkbox" id="gift_aid" name="gift_aid" value="1">
<label class="pmpro_normal pmpro_clickable" for="gift_aid">
Allow Gift Aid to be collected?
</label>
<hr>
</div>
</div>
jQuery snippet to replace the two you have:
$("#giftAid").hide();
This is also a far more readable and maintainable approach. I am, of course, assuming your ultimate goal is to hide the gift-aid section entirely based on some logic. but if you really only want the header and P element hidden, just move the others outside the div tag with the "giftAid" id.
I need to hide some option when clicking the thumbnail, for the thumbnail HTML code
<div class="editor_thumbnail">
<ul id="side-switcher">
<li class="thumb"><img data-target="0" src="img1" alt="" class="tooltip img_switcher img d_block tooltipstered"></li><li class="thumb"><img data-target="1" src="img2" alt="" class="tooltip img_switcher img d_block tooltipstered"></li></ul>
</div>
for the first field
<div data-target="front" class="front" id="front"><label for="front">FRONT</label><textarea maxlength="100" data-area="front" class="text" data-target="front" id="front" placeholder="front texthere!">Front text!</textarea></div>
second field
<div data-target="back" class="back" id="back"><label for="back">Back</label><textarea maxlength="100" data-area="back" class="text" data-target="back" id="back" placeholder="back text!">Back Text!</textarea></div>
when I click the front thumbnail it will only show front field likewise with the back thumbnail,
I can not change HTML code because the code already in there, I try to use css like tab but still fail, i want to use onclick but the html code not have onclick.
Using Javascript you can add attributes to your HTML elements by using setAttribute():
function addAttributes() {
// Element.setAttribute(name, value);
document.getElementById('myElement').setAttribute('onclick', 'myFunction();');
}
A detailed explanation on setAttribute() can be found on this MDN page.
I also wanted to point out that IDs must be unique - I noticed you used the same ID value for your div tags as well as your textarea tags.
I need to control hiding/showing certain spans. I found some examples here and the basic code works. Here is my jsfiddle. There are two topics and when the word more is clicked on, sub-topics are shown. The problem is that all of the sub-topics are shown, not just the ones under the topic that was clicked.
I know the problem is with the same class name being used for the two div sections and if I change the class name of one of them and duplicate the jquery it will work as I want. But this code is being created using a loop function in php and there isn't a set number of possible topics. I suppose I could change the php code to create unique class names but I don't know how to add the jquery code so it will check any number of possibilities. How can this be coded?
<script>
$("#kid-1").hide();
$("#kid-2").hide();
$("#kid-3").hide();
$(".more-kids").click(function() {
$("#kid-1").toggle();
$("#kid-2").toggle();
$("#kid-3").toggle();
});
</script>
<div class="information">
<span>Terms</span>
<span class="more-kids">more</span><br />
<span id="kid-1">First Child</span><br />
<span id="kid-2">Second Chlld</span><br />
</div>
<div class="information">
<span>Conditions</span>
<span class="more-kids">more</span><br /><br />
<span id="kid-3">Third Child</span><br />
</div>
If you are making id's that are numbers, that indicates you should probably be using a class instead. What you could instead do is change your id to a class being "kid". Then toggle the items by using $(this).nextAll(".kid").toggle():
$(".kid").hide();
$(".more-kids").click(function() {
$(this).nextAll(".kid").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="information">
<span>Terms</span>
<span class="more-kids">more</span><br />
<span class="kid">First Child</span><br />
<span class="kid">Second Chlld</span><br />
</div>
<div class="information">
<span>Conditions</span>
<span class="more-kids">more</span><br /><br />
<span class="kid">Third Child</span><br />
</div>
I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")
I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.
You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>
This would work:
document.getElementById('one').className = 'a';
you could get the element by id with:
document.getElementById("one")