gfpdv gfpdv - 6 months ago 11
Javascript Question

Javascript/jQuery won't hide HTML element

I'm trying to hide an section in my HTML code, but I already tried everything, even used jQuery, but it just doesn't work, it won't hide it anyway.

<div class="coding2">
<div class="box">
<div class="JavS">
<h1>JavaScript</h1>
<span class="barr"></span>
<p>bla bla bla bla bla</p>
</div>
<div class="htmlCSS">
<h1>HTML/CSS</h1>
<span class="barr"></span>
<p>bla bla bla bla bla </p>
</div>
<div class="php">
<h1>PHP</h1>
<span class="barr"></span>
<p>bla bla bla bla bla</p>
</div>
</div>
</div>


This is the top of the HTML file, and I think the problems it's not here actually.

<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery-2.2.3.min.js"></script>
<script src="main-jquery.js"></script>
</head>


I already tried everything like I said, usually I google the hell out before trying to asking it somewhere, but this time, I can't figure out why it isn't hidding.

@edit

The code I tried in "main-jquery.js"

(with jQuery)

$(function(){
$('.coding2').hide();
});


(with pure javascript)

document.getElementById(".coding2").style.visibility = "none";


and

document.getElementById("#coding2").style.visibility = "hidden";


(yes, when did the last one I edited the class "coding2" to id="coding2" but it didn't anything)

I want to hide the entire div "coding2"

@edit2

I got what I wanted, special thanks to: @Fabio and @JamesBurton
(I don't know why stackoverflow isn't letting me select "solved", but yeah, thanks everyone!)

Answer

As far as I can see you haven't actually called the function that hides it. You need to decide whether you want it to be hidden on button click etc. (so add a button that calls the function).

If you want it to be hidden by default then add in your JavaScript document below the div you want to hide and add this to before your function window.onload = function(){ //enter your code }; This is for pure JavaScript by the way.

You also need to add an ID to your divs because what you have now is a class so add id="coding2" and you don't need the # or . in your getElementByID.

Hope this helps.

EDIT: Given what you've told me in the comments of this answer I would say that you should look into creating a grid system with CSS. Here is a very good tutorial on making one http://j4n.co/blog/Creating-your-own-css-grid-system

Then you can use %s to make sure your layout adapts and change the sizes based on screen size doing media calls. I don't think JS is the way to go.

I saw in the comments of the main question that using display: none in CSS did what you want. In order to do that with JS just add that CSS style with JS by doing document.getElementById("coding2").style.display = "none";.