CODEWITHSUNDEEP
javascriptjqueryhtmlcss
gfpdv
gfpdv

Reputation: 13

Javascript/jQuery won't hide HTML element

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

<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 don't think the problem is here.

<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 of it before trying to ask it somewhere, but this time, I can't figure out why it isn't hiding.

@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 do anything)

I want to hide the entire div "coding2"

@edit2

I got what I wanted, special thanks to: @Fabio and @JamesBurton (thanks everyone!)

Upvotes: 1

Views: 4453

Answers (3)

James Burton
James Burton

Reputation: 94

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 adapt 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";.

Upvotes: 0

Mohammad Olfatmiri
Mohammad Olfatmiri

Reputation: 1675

add an id to your div and use code below

<div id="coding2" 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>
<script>

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

</script>

Upvotes: 0

user4262528
user4262528

Reputation:

Make sure you are wrapping the hide function in $(document).ready()

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

This will hide the element on page load.

Or with pure javascript:

<html>
  <head>
  </head>
  <body>
    Your HTML here

    <script>
        document.querySelector('.coding2').style.display = 'none';
    </script>
  </body>

</html>

Or with CSS:

.coding2 {
    display: none;
}

Upvotes: 4

Related Questions