making div invisible and after clicking link make it visible - html

I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.

You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples

Related

addclass on hover not working

I want to hover on an element (an imagemap area, actually but I made it a simple div for this example) and create an animation on a different div element. Since they're not child or sibilings I had to use java and addclass but it's not working. It looks like the trigger element is not recognized and if I hover it nothing happens
<div class="testHover">
<p>Hover me to change color</p>
</div>
<div id="timeLine">
<div id="primaGuerraMondiale">
<h2>Content</h2>
</div>
</div>
css
#primaGuerraMondiale {
background: green;
}
.animated {
color:white;
}
javascript
$('.testHover').hover(function() {
$('#primaGuerraMondiale').addClass('animated');
}, function() {
$('#primaGuerraMondiale').removeClass('animated');
});
Here is the fiddle https://jsfiddle.net/elisapessa/yzLe803n/
You need jQuery 1.9.1 and above to make it work. The code is right.
In the left hand panel in the jsfiddle, there is a section called "Add Resources". Click this, then add the URL into the field and click the + button. This will add your resource (JS or CSS) to the page. After that you click on run and check it:

How to hide/display an anonymous div without affect other divs

I want to hide an anonymous-child div which has a child-div also. I want also to display the anonymous div by clicking on div#child2.
I don't have any authority to change/add/remove ids or classes.
So I did this:
<div id="parent">
<!-- the anonymous div which I want to hide and display by clicking on div#child-2 -->
<div>
<div id="Container1" >
<div id="Container1">
<object>.....</object>
</div>
</div>
</div>
<div onclick="appear()" id="child-2">
<div id="child-of-child"></div>
</div>
</div>
CSS
div#parent div:first-child {
display: none;
}
Javascript
<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block !important";
}
</script>
The problem is that this type of css has affected the div#child-of-child and div#Container1 because the css reffering to every first child of any div.
So, my first question is:
How can I hide the anonymous div without having any effect to another div and display that later by clicking on div#child-2.
Second:
In this type of javascript code the styling of "block !important" works as it is?
Third:
The div#child2 doesn't have any content by itself. It includes another div which has content. If I set on div#child2 an event like onclick="appear()"; it works?
Forth:
In case that there is no way to avoid any effect to other divs is there any way to display the anonymous div and div#Container1?
Try this to only hide the first child within the #parent div:
div#parent div:first-child div:first-child {
display: none;
}
EDIT
To make Container1 appear afterwards, do the following in js (notice: I removed `!important' as I don't believe that is allowed, removing it made the code work - you can try it out below through the Fiddle link):
function appear() {
document.getElementById("Container1").style.display="block";
}
FIDDLER

Clicking link inside div 2 should hide outer-div 1

I have two divs side by side. When a hyperlink's state is active (when it's clicked), I want to hide the div to the left, using display: none;.
I did this about a year ago, but since this is my first site since then, I can't remember how I did it.
I know it can be done in CSS alone, using :active but just not sure how anymore. How can I do this?
Use the "general sibling" selector ~ in conjunction with a:active
HTML
Click Me
<hr />
<div class="foo"></div>
<div class="bar"></div>
CSS
a:active ~ .foo {
display: none;
}
It basically says: find the div with a class of foo that's a sibling of the active anchor and hide it. Not to be confused with the adjacent sibling selector, +
View the demo here: http://jsfiddle.net/DNy2B/
I am not sure if I understood your question correctly but if it is what I think you asked then do this
<div style="display: none;">
I am learning HTML, so I am kinda new and this might not be what u asked but I wanted to help so yeah :)
This will hide/show the div when the link is clicked.
<html>
<head>
<title>Title</title>
<script src="jq.js"></script>
<script>
$(document).ready(function() {
$("#link").click(function() {
$("#div2").toggle();
});
});
</script>
</head>
<body>
<div id="div1">
div1
<a id="link" href="#">hey</a>
</div>
<div id="div2">
div2
</div>
</body>
</html>

Link to an element on the same page and have it centered in window

I am working on a page and it is a little lengthy, so I chose to link to sections of it using the method below:
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.</div>
Everything works correctly, as I am pretty proficient with basic stuff like this, but I am wondering if there is a way to make it so that the content I am linking to is a little farther from the top of the browser window, rather than immediately at the top. It doesn't have to be perfectly centered, maybe a margin of 100px or so would be fine.
Thanks
<head>
<script>
function change()
{
document.getElementById("myID").style.marginTop="100px";
}
</script>
</head>
<body>
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.sss
<pre>
s
s
s
s
s
s</pre>
</div>
</body>
All you need to do is add a little CSS:
#myID {
margin-top: 100px;
}
Hope that helps!

How to change iframe src using css

I am trying to remove ads from my profile on a website, so I don't have access to the original css or code, but there is still the ability to change the css code by editing the profile.
For example I have added these lines:
<style type="text/css">
.topad {display:none; visibility:hidden;}
#buyers_ad {display:none; visibility:hidden;}
</style>
which removes an advertisement from the top and right side of the page.
The problem is that there is an iframe that points to an advertisement. Is it possible to change the src that the iframe points to using css, but not html? The iframe does not have a class or id.
It's an iframe inside a div, if that is helpful.
You can make iframe hidden using css
Html:
<div id="somediv">
<iframe .... />
</div>
css:
<style type="text/css">
#somediv > iframe { display : none}
</style>
Or you can also change src of iframe using Jquery / JS
Html:
<div id="somediv">
<iframe .... />
</div>
Jquery:
$('#somediv iframe').attr('src','http://google.com');
Hope It Helps You.. :)
Use jQuery thats the better option to hide