Show hidden HTML elements with javascript - javascript

I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated

You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.

You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});

You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});

Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}

Related

Trying to load HTML into a div with a button

I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.
The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});

Remove div and replace using button onclick

i would like remove a current div and replace with another using onclick with a button
i've tried the below method but as the old and new div's both contain different scripts it doesn't load the scripts in the new div correctly
document.getElementById("div1").style.display="block";
document.getElementById("div2").style.display="none";
I guess the best way is to actually remove div1 and replace with div2 loading a fresh?
how would i do this?
i've tried the jquery solutions but my website doesn't seem to like jquery. anyone know why? i've tried pure javascript and that works but not jquery. i'm loading jquery in the head :(
i understand my template relies heavily on mootools which can conflict with jquery
jsFiddle
<div id="div1">div1 contents</div>
<div id="div2" style="display: none">div2 contents</div>
<button id="button">Button</button>
$('#button').on('click', function() {
$('#div1').remove();
$('#div2').show();
});
Or if you just want to replace the HTML
$('#button').on('click', function() {
$('#div1').html($('#div2').html());
});
You can accomplish this easier with jquery, first be sure to put the jquery include within your head tags. This is the latest version of jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
given this html:
<div id="div1">div1</div>
<div id="div2">div2</div>
<button id="toggle">toggle</button>
and this css:
#div2 { display:none; }
you can use this jquery:
$("#toggle").click( function() {
$("#div1,#div2").toggle();
});
this will toggle back and forth between the divs, jsfiddle here > http://jsfiddle.net/WMPx7/
if you don't want to toggle the divs, you can change the jquery to look like this:
$("#toggle").click( function() {
$("#div1").hide();
$("#div2").show();
});
I am presuming that your both div have an id attribute and have some data.
Pure Javascript
function fnChangeDivContent(){
document.getElementById("div1").innerHTML = document.getElementById("div2").innerHTML;
}
HTML
<input type ="button" value = "Replace Div Content" onclick = "fnChangeDivContent()" />
might help you.
Try this:
hideshow divs
and the js:
function elements() {
$('#div1').hide();
$('#div2').show();
}

Jquery css show div link not working? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Jquery css show div?
Ok this is my problem that no one can seem to answer. I have two javascripts in use. Once is for the popup I have and tells it to stay closed for 24hrs when closed. The other is to put a link some where on the page to display this popup until refreshed and kept hidden till the cookie expires. Now the div popup is set to display:none. The cookie tells it to be shown until the close button is pressed. No matter what I seem to rework in my javascript to tempoarly show the popup from a link, it will not show. Some how the cookie javascript is going to have to be modified and thus having to remove css:display:none on the popup div. I have no idea what to do.
This is the current code:
http://jsfiddle.net/Dv7DR/-
http://pastebin.com/fHvv5spn
<script type="text/javascript">
$("#linkshow").click(function {
$("#window").show()
});
</script>
Submit a comment
<div id="window">
...
<div>
<script type="text/javascript">
...cookie popup hide for 24hr on close
</script>
Note: I have already tried:
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
}); ​
and...
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
and...
<div id="window" style="display:none;">
to
<div id="window">
Then the other 24hr cookie javascript doesn't keep the popup hidden. I am assuming I need to take out the id="window" style="display:none; and some how advanced the javascript cookie at the bottom the code so it will hide when asked to be hidden for 24hr and show when needed to be shown on the current page until refresh but I am at blank on what to do.
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
}); ​
for live demo see this link: http://jsfiddle.net/nanoquantumtech/wTmCL/
you should load jquery library first :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
if you want to do the popup, you may look into jquery dialog. The code above will only show the div but not poping it up.
Jquery dialog will do the popup and make sure you referent jquery ui. http://jqueryui.com/demos/dialog/
also your html is incorrect and also , hiding a element using css is better than hiding by jquery when page loading
use
<div id="window" style="display:none;">
...
</div>
instead of
<div id="window">
...
<div>

Can I assign an action from javascript dynamically?

Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.

Javascript Ajax JQuery

Here's my issue.
I have a javascript function that update a div when i click the proper link. And it is working.
Since i have cliked the link my div content is updated with another Javascript. This time to close it.
Its fairly simple but i cant get it to work and i dont know why!
Here is the code that is in the page when it load for the first time
The div id config_window
<div id="config_window" class="config_window">
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn"class="admin_btn">administration.</div>
<div id="test">test</div>
</div>
Now the Javascript that call for the update inside that div
<script language="javascript" type="text/javascript">
$("#admin_btn").click(
function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
}
);
</script>
So far it's working my div is getting updated and i see the new content. The new content is
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn_x" class="admin_btn">Terminer.</div>
<script language="javascript" type="text/javascript">
$("#admin_btn_x").click(
function(){
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
}
);
</script>
i was expecting that same function to work but its not!! and i dont get why since the first one is.
Could it be becuse my second script is in the div that get updated??
Thanks!
I suspect it's because the element that the second handler is supposed to apply to doesn't exist until after the DIV is updated and the function applying the handler is executed before the DIV is updated -- therefore the handler is not applied. You might want to try using the live handlers for the click event so that it will apply to all elements matching the selector no matter when the element is added. You can add both handlers on page load and they will apply to the elements with those ids whether they are added dynamically or not.
<script type="text/javascript">
$("#admin_btn").live('click', function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
});
);
$('#admin_btn_x').live('click', function() {
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
});
</script>
Is there a reason you add divide the function into two scripts? I would change your script to something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#config_window').hide(); // just in case
$('#admin_btn').bind("click", function() {
if($('#config_window').is(':hidden')){
$('#config_window').show();
config_set('config_window','open','var')
} else {
$('#config_window').hide();
config_set('config_window','close','var')
}
});
});
</script>

Categories