So I'm a student and just very lost in my coding class. My teacher gave us this code to make it so when I click on a header, it expands into a paragraph.
He then wants us to make it so when you click on the header, the paragraph disappears again. I just cannot figure out how to do this second part, making it disappear.
This is what the 'Show Article' code looks like.
function showArticle(id) {
document.getElementById(id).style.display="block";
Can anyone help me out please? I feel like it's so simple I'm just so bad at this. If you could tell me where to place it in my code that would be much appreciated as well.
If you are using js and not jquery
var visible = false;
function showArticle(id) {
if (visible === false) {
document.getElementById(id).style.display="block";
visible = true;
}
else {
document.getElementById(id).style.display="none";
visible = false;
}
}
function toggleArticle(id){
($('#'+id).is(':visible') ? $('#'+id).hide() : $('#'+id).show() )}
Just use jQuery's toggle.
$('#'+headerId).on('click', function(){
$('#'+id).toggle();
});
Related
I know this question might be asked a lot, but can someone help me with this one problem.
So the problem is that I'm trying to make a mobile hamburger menu and I want to make the onclick event happened when someone clicks on the icon.
function toggleMenuFunction() {
let getSidebar = document.querySelector(".sidebar");
if(getSidebar.style.display === 'none'){
getSidebar.style.display = 'block';
}else if ( getSidebar.style.display === 'block'){
getSidebar.style.display = 'none';
}
}
I tried doing it like this and it won't do anything. Please can any one help me?
If you want to trigger a function when an element is clicked you need to write that too ;)
document.onload = () => document.querySelector(".sidebar").addEventListener("click",toggleMenuFunction);
the document.onload makes sure the listener gets attached after the document has fully loaded. Note: You can only have one document.onloadassignment in your code. It is almost always a good idea to write a wrapper function for that purpose. As in:
document.onload = () => {
document.querySelector(".sidebar")
.addEventListener("click",toggleMenuFunction);
}
I have this tabs built.
When I click on Round Trip, I want to make disappear that Flight 2 form.
But since that is needed on multi-city, I want it to show back on
multi-city.
I used this
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.ret_date_block').attr("id","noreturndate");
$("#noreturndate").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#noreturndate").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
});
I used this to hide something on the One Way tab.
If:
$(".roundwaybuttonchecked").on("click", function(){
$("#noreturndate").show();
});
If I use here the correct id of Flights 2 to hide it on the Round-Trip, it does its job but when I switch between One-Way and Round-Trip it shows nothing.
This line get's in action when I go from Multi City to Round-Trip.
Any ideas?
You definitely need a conditional in here.
In your JQuery function, try something like this:
function radioButton() {
if (document.getElementById('htmlElement1').checked) {
document.getElementById('htmlElement2').style.visibility = 'visible';
} else {
document.getElementById('htmlElement').style.visibility = 'hidden';
}
Please note that since I cannot view your HTML - I am not sure what elements you are using so where i say htmlElement 1 (or 2) please fill that in with the appropriate elements.
Let me know you results!
Never mind.
I used same code as above
jQuery('#rdbOneWay').attr("class","onewaybuttonchecked");
jQuery('#rdbRoundTrip').attr("class","roundwaybuttonchecked");
jQuery('#rdbMultiCity').attr("class","multiwaybuttonchecked");
jQuery('.pnlFlight2').attr("id","pnlFlight2");
$("#pnlFlight2").hide();
$(".onewaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".roundwaybuttonchecked").on("click", function(){
$("#pnlFlight2").hide();
});
$(".multiwaybuttonchecked").on("click", function(){
$("#pnlFlight2").show();
});
and it did the trick, I don't know why it didn't work earlier but glad it did now.
Quite simple,
I would like on click, to arrive to a specific section on a new page.
Usually www.mydomain.com/page1/#section should work, #section being the ID of the section.
However, the menu I'm using is breaking this. Si I'm trying to see if it's possible to do this by Jquery, using Hash. ( When url have this hash example www.myd0main.com/page/#contact - do this)
SO far I tried the following:
<script>
jQuery(document).ready(function() {
if (window.location.hash.split('-')[0] == '#contact') {
$('#contact').addClass('hashed');
}
});
</script>
Withotu any sucess.
Do you guys have any turnaround / idea to make this work ?
It will be lovely !
Thank you !
Perhaps
if (window.location.hash == '#contact') {
// Scroll to #contact
$(document).scrollTop($("#contact").offset().top);
}
I have a little problem. When I click on menubutton "x" I trigger an onclick event wich opens/displays an element. So far, so goed... But now I want to click the same menubutton "x" to close that same element. And that is where it goes wrong. I have no idea how to do it.
Here is my html code with the JS.
diensten
*submenuAan (submenu aan) means turn submenu on.
function submenuAan()
{
document.getElementById('menu-vg').style.display = "block";
document.getElementById('menu-vg').style.zIndex = "999";
}
So I thought, when I add an other function behind "return false" for closing, it will work. But it did not.
I hope someone can and will help me. Thanks!
Ps.
before someone tells me there already is a simular question like this... I did search, but did not find. If there is, I would like the link to it.
You can check with a simple if statement which action should be taken:
diensten
function toggleSubmenu(){
if(document.getElementById('menu-vg').style.display != "block"){
document.getElementById('menu-vg').style.display = "block";
document.getElementById('menu-vg').style.zIndex = "999";
}
else{
document.getElementById('menu-vg').style.display = "none";
document.getElementById('menu-vg').style.zIndex = "auto";
}
}
Minifying the Code for #Xufox's Answer as
function toggleSubmenu(){"block"!=document.getElementById("menu-vg").style.display?(document.getElementById("menu-vg").style.display="block",document.getElementById("menu-vg").style.zIndex="999"):(document.getElementById("menu-vg").style.display="none",document.getElementById("menu-vg").style.zIndex="auto")}
I want to make a video appear when flipping to a certain page of this application: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html Here is some of my amateur code:
$(document).ready(function(){
if (page === 2)
{
$("iframe").show();
}
else
{
$("iframe").hide();
}
});
It connects to an iframe tag that is absolutely positioned. Is that the right approach?
Thanks for your help :-)
Your code will only check the page once - when it's initially loaded.
You will want to put that if statement inside a click handler...
$('#elementYouClicked').live('click', function() {
if (page === 2) {
//show
} else {
//hide
}
});
If this is not what you are asking, can you elaborate on your question please?