Develop Reference

How to hide and display when ever onclick function happen by using javascript?

I am designing one html page inside that I am using javascript also , what my requirement is when ever the page is loading the first div should be displayed when ever I click on that icon it should hide and it displays the second div content,for that please help me to fix the issue..
<div class="first">
<i class="fa fa-heart" onclick="toggle()" ></i>
</div>
<div class="second">
<b> I am from second div</b>
<div>
<script>
flag=true;
here I am not getting how to write the function to achieve my task
</script>

Your toggle function could be like this:
function toggle() {
var x = document.getElementsByClassName('second');
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I would suggest using and id on the element instead of a class as it is explained here:
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

There are multiple ways you can do it. The 2 I normally use are:
Wrapping the icon into label and adding <input type="checkbox" />. This allows to achieve it without using any javascript at all, but it has a bit of complex css to it. You can check out this https://css-tricks.com/the-checkbox-hack/ for reference.
This is easy to do. You need to define .active { display: block } class in your css and in javascript you can write something like
function toggle() {
var element = document.querySelector(".second");
element.classList.toggle("active");
}
but before you need to make .second { display: none }
I am sure that there're more ways of doing this, but these are the 2 I use the most depending on the situation.

How can the div remain as display show on the next HTML page when it was showing on the previous HTML page?

In each of the 20 HTML pages, I have this div element with different content that is currently on display: none;. I used javascript to show or hide the div. On one of the HTML page, I can show this div (turns to display: block), and I have a button that allows me to click to the next div (next HTML page) and the previous div (prev HTML page). The problem I'm encountering here is the next page will reload which will show the div as display: none when really I want it to be on display: block because the previous HTML page had the div showing (was display: block).
One approach I was thinking of was when I click to show the div (to display: block) on one of the HTML page, the other 19 pages collectively will display: block until I hide the div (display: none). Ideally, I would want this approach.
The other approach I have been reading up on is saving the data of the site in a localStorage or cookie. So the next page can load that data and make the div display: block. I don't understand this and I don't know if it make sense for solving the problem I'm having.
Here is what I currently have:
HTML:
<! -- omitted HTML code above and below this div -->
<div id="container">
<a name="index"></a>
<a href="pgs/35.html#35" >
<div class="button-fullscreen display-left-fullscreen">
<div id="arrow-left-fullscreen"></div>
</div>
</a>
<a href="pgs/1.html#1" >
<div class="button-fullscreen display-right-fullscreen">
<div id="arrow-right-fullscreen"></div>
</div>
</a>
<img id="artwork-fullscreen" src="img/team1.jpg" />
<img id="fullscreen-exit" onclick="openFullscreen()" src="img/fullscreen_exit-white-24dp.svg">
</div>
Javascript:
function openFullscreen() {
var x = document.getElementById("container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}

There are two solutions for this I can think about.
You can add a GET parameter to the URL and read it in javascript to determine, if this element should be on block or not. So, you URL can look something like this: http://example.com/?block=true
Just a quick and dirty example for it to get an idea:
var test;
const queryString = window.location.search;
queryString.split("?").map(function(elem){ test = elem.split("=") });
You should, of course also check, if the parameter is there. If not, you shouldn't display it.
Or you can use, as you said, the localStorage in order to store this value.
Something like this.
if(!!localStorage.getItem('isBlock')){
element.setAttribute('style', 'display: block;');
}else{
element.setAttribute('style', 'display: none;');
}
function onButtonClick(){
localStorage.setItem('isBlock', 'true');
}
The !!localStorage.getItem('isBlock') has two purposes here. It checks, if the value is true or if it is null.
So !!(true) results in true, while !!(false) and !!null result in false.
The problem here is that you don't know the state of the previous page. So, when you click on the button to get to the previous page, the previous page doesn't know that you changed the button to block. So, you need to store the state of your application somewhere. The URL or localStorage are normally the places where you do something like this.

How to display a div/element on mouse hover using external JavaScript?

My divs are nested so i understand i cant display an element if its already hidden. I want the information(p1 inside my html code)to display once the mouse hovers over another element(h1 in my html. I have already made my paragraph 1 style to none in JavaScript, now i need it to re-appear, i have tried the following code to attempt to make it re-appear document.getElementById("1").onmouseover.style.display = "block"; but with no success.
This is My HTML code, ignore the order im new to web dev lol
This is the code i have tried but it doesnt seem to work
This is the end result i want, the circled text on hover display the paragraph

So a few things. For starters, put actual code into your questions instead of screen shots. If we can't reproduce your issue it's difficult to troubleshoot usually from just pictures.
Next, you might familiarize yourself with syntax a bit more since p1 isn't a valid HTML element.
Then, try not to rely on javascript too much and keep presentation stuff on the compositor thread. Here's an example accomplishing your goal with no javascript. Hope it helps, cheers!
p {
display: none;
}
h1:hover + p {
display: block;
}
<h1>Hover me</h1>
<p>PEEK A BOO!</p>

Yes, this is doable without javascript but since the question asked how to do it with, hopefully this helps get OP on the right track.
<div id="bioBlock" style="display:none">
<h2 id="1">
Cameron Lodge
</h2>
<p1 id="para">Im an avid learner of anything computers....</p1>
</div>
function showBioBlock() {
document.getElementById("bioBlock").style.display = "block";
}
https://jsfiddle.net/avL3j765/

document.getByElementId("myH1").onmouseover = function(){
displayH1("myP");
}
document.getByElementId("myH1").onmouseout = function(){
displayH1("myP");
}
function displayH1(myId){
if(document.getByElementId(myId).style.display == "block"){
document.getByElementId(myId).style.display = "none";
}else{
document.getByElementId(myId).style.display = "block";
}
}
This invokes a function that toggles the paragraph's style when the mouse enters and leaves the element. It assumes that you have an id on both your h1 and p tags, in my example myH1 and myP respectively.

Understanding the .toggle function and hiding/unhiding buttons

I have a text input area that chops the string up into an array and makes buttons out of it for each word. I want to be able to hide each word seperate from eachother on('click') on the button. I tried to use the Jquery.toggle function but this only hides all of my buttons. I cant make them re-appear. Is there a way to fade them out and make them hidden and be able to unhide them.
I already tried searching the internet. Couldn't really come to a solution actually considered writing my own toggle but that just seems off. Is the only way you can use toggle to actually have a static button thats clickable that hides or unhides a piece of code.
Its obviously kinda weird to be able to unhide something thats hidden when there is no button that shows/hides all.
let createText=$('<textarea/>', {
'id':'Text',
'placeholder':'Text',
'class':'form-control col col-md-5',
'rows':'10'
}).on("input", function() {
let woorden = $(this).val().split(/(\s)/g);
$('#outputButtons').empty();
for (let i = 0; i < woorden.length; i++) {
if (woorden[i].replace(/\s/g, "") != "") {
let outputBtn=$('<button/>', {
'class': 'btn btn-secondary mt-2 mr-2'
}).html(woorden[i])
$('#outputButtons').append(outputBtn);
}
}
});
let outputButtons = $('<div/>', {
'class':'col',
'id':'outputButtons'
}).on('click', function() {
$('#outputButtons').toggle(1000);
});
How would I go on, on actually hiding/unhiding the buttons seperate from eachother. Is this possible without a static button that shows/hides all ?
Thanks in advance for reading, I am a new programmer and there is just so much information and things you have to keep in mind at the same time which makes it confusing from time to time. SO sorry if this post is confusing.

You can try this in your code:
Write the below css class:
.hide{
opacity: 0;
}
Then apply on output buttons("on click" function):
$(this).toggleClass("hide")

You don't need to use toggle for buttons!
Add this class to buttons you want to disable
.disable{
cursor: not-allowed;
pointer-events: none;
}
For changing the status you can use jquery
$("#id").toggleClass('disable');

Click to show more - maybe JS?

I am not sure what language or how to do this, but I am looking to have a word on a page, and when clicked, it will reveal more underneath. If it is clicked again, that stuff will hide away again? Any ideas?

Basically, you will need to manipulate the display CSS property of the element to be hidden/revealed:
<span id="showHide">Show</span>
<div id="foo" style="display:none">Here is some text</div>
<script>
document.getElementById("showHide").onclick = function() {
var theDiv = document.getElementById("foo");
if(theDiv.style.display == 'none') {
theDiv.style.display = 'block';
this.innerHTML = 'Hide';
} else {
theDiv.style.display = 'none';
this.innerHTML = 'Show';
}
}
</script>

I'd recommend javascript and using jQuery .show() & .hide() methods:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://www.learningjquery.com/2006/09/slicker-show-and-hide

you could do this with jQuery, here a ready to use example:
http://jsfiddle.net/8sDLg/
$(function() {$('div.more').hide()
$('a.showmemore').click(function(){
$(this).next('div').slideToggle()
})})

Put the stuff in a div with style display:none;. In the onClick handler of the word (can be link or a button), toggle the display style between '' (which means 'default') and 'none'

I created a demo for you here.
You could use jQuery for that and make your life easy:
Show/Hide
<div id="mydiv">Some content</div>
jQuery:
$(function(){
$('#link').click(function(){
$('#mydiv').slideToggle();
return false;
});
});
As can be seen, the slideToggle() does the trick there for you :)

Executive summary: use a framework plugin
Long version:
You could use javascript -- more likely in a combination with a javascript framework, like jQuery. This would involve adding a click handler to the word (actually a span tag around it) and having a way to retrieve the extra information to show as a tooltip -- there are plenty of plugins for this. Search for "jquery tooltip" here or using google: here's one example.
Alternatively, you could simply surround the word with the span tag and add a title attribute to the tag. Hovering over the word (actually the tag) would bring up the browser's default tooltip. This might be an easy way to get started with it -- in fact, this could be the start of the javascript solution. Using the tag for the click event and taking the data from the title attribute -- probably by storing the title in jQuery data on page load, then grabbing the text from the data on click so that you don't have a conflict with the browser's tool tip behavior. Many of the plugins operate this way.

Another elegant approach using pure HTML and CSS without JavaScript.
HTML:
here goes text before
<label class="details">
<input type="checkbox" /><span>here come some details</span><em> </em>
</label>
and after
CSS:
.details input,
.details span {
display: none;
}
.details input:checked~span {
display: inline;
border-bottom: dotted 1px gray;
}
.details em:after {
content: "show...";
}
.details input:checked~em:after {
content: "...hide";
}

Quick idea how to do it when avoiding a JS-only solution. I'm using jQuery here, because it is faster to code in, but as I mentioned above, if this is your only JS functionality it would only add a heavy-weight file for some trivial extras.
<script type="text/javascript">
jQuery(function() {
$(".article .additional")
.hide()
.before("<a href='#'>")
.prev()
.text("more")
.click(function() {
$(this).next().toggle()
})
});
</script>
<div class="article">
<h2>Some headline</h2>
<p>Some intro text that is always visible</p>
<div class="additional">
<p>Some extra text that is hidden by JS</p>
<p>But will stay visible if the visitor doesn't have JS</p>
</div>
</div>
As you see, the HTML is completely stand-alone. Only if JavaScript is supported, a "more" link will be added and the additional content hidden, so that non-JS users still can read all the text and don't have an useless "more" link.