Html/Css: Make a Div "Invisible" to Clicks

HTML/CSS: Make a div invisible to clicks?

It can be done using CSS pointer-events. This property is supported in Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}

Click through div to underlying elements

Yes, you CAN do this.

Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem.

Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 conditional:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Here is a basic example page with all the code.

making div invisible and after clicking link make it visible

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

How to make div invisible to still able to click?

If the <div/> does not contain any contents, you could:

#mydiv {
  background-color: transparent;
  height: 50px;
  width: 50px;
}

See the CSS2.1 property background-color

making a div visible but able to click through

No JavaScript needed. Use the CSS pointer-events: none on the div:

#border-overlay {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: solid 8px white;
  pointer-events: none;
}

jsFiddle example

Click on a div to make another appear and hide

Create a extra class like hidden, then toggle that class on click of div1. Note that this answer uses javascript, without it it's not possible to make the change like you've described it in your question.

document.getElementById('div1').addEventListener('click', () => {  document.getElementById('div2').classList.toggle('hidden');}, false);

#div1 {  height: 100px;  width: 100px;  background-color: orange;}
#div2 {  height: 100px;  width: 100px;  background-color: blue;}
.hidden {  visibility: hidden;}

<div id="div1">Foo</div><div id="div2" class="hidden">Bar</div>

Make DIV invisible in CSS and JavaScript

This would probably work:

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT: I would take a look at the common helpers in the HTML5 Boilerplate code to explore other ways of making things disappear.

How to show/hide div on click with stricly HTML/CSS

Html

<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>

CSS

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
.facebook {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
   display: none;
}

fiddle Here And more About this csstricks

JavaScript Show invisible divs on click

This could be to do with you not being to read element.style.display as none the first time round. This is because it has not yet been set by JavaScript, but just by css. I suggest changing your if statement to check for not "block".

function moreSoc() {
    
    var moresoc = document.getElementById("moresoc");
    var btnText = document.getElementById("mbtn");

    if (moresoc.style.display != "block" ) {
        moresoc.style.display = "block";
        mbtn.innerHTML = "More ▲";
    } else {
        moresoc.style.display = "none";
        mbtn.innerHTML = "More ▼"
    }

}

.morebutton {
    border: none;
    background: #fff;
    color: #111;
    font-size: 32px;
}

#moresoc {
    display: none;
}

<div class="wrapper more">
            <button class="morebutton" id="mbtn" onclick="moreSoc()">More ▼</button>
        </div>
        <section class="social-links" id="moresoc">
            <div class="wrapper">
                <h2>Others</h2>
                    <div class="social-link facebook">
                        <p>Facebook</p>
                    </div>
                    <div class="social-link instagram">
                        <p>Instagram</p>
                    </div>
                    <div class="social-link twitter">
                        <p>Twitter</p>
                    </div>
                    <div class="social-link youtube">
                        <p>Youtube</p>
                    </div>
            </div>
        </section>

How to toggle div visibility by clicking a div?

Instead having a lot of div in the HTML, you can just use a single div and dynamically replace its content using javascript

First, create a div element in the html and lets put dialogBox as its id

<div id="dialogBox">
  
</div>

In javascript, declare the dialogs as an array like so

const dialogs = [
  {
    id: '01',
    text: "Content to show at the beginning, with everything it could come to my mind: text, buttons, images, animations... ;"
  },
  {
    id: '02',
    text: "Content to show after the second click, like as above;"
  },
  {
    id: '03',
    text: "Content to show after the n. click... U got it at this point, i think;"
  }
];

It is up to you what to put in there but in this case, I just put text and id. id isn't really necessary at this moment but we can use it for querying since there will hundreds of this in the future.

Now, find and store our div element into a variable

const dialogBox = document.getElementById('dialogBox');

Finally, we can now update/replace our div content.
In this example, we'll be updating the content on each mouse clicks

let index = 0;
dialogBox.innerHTML = dialogs[index].text

window.addEventListener('click', () => {
  index = (index < dialogs.length - 1) ? ++index : index;
  dialogBox.innerHTML = dialogs[index].text
});

In the above example, we set the div innerHTML which its content, to the current dialog text. Then, increment the index value by 1 on each mouse click then update the innerHTML again.

And we are done!

Html/Css: Make a Div "Invisible" to Clicks