0

Hello.
There is a button in the page when i click it, a div will appear or disappear by toggling to the left and right.
I want when the page loaded, user can only see the button and have to click to appear the dive.
But the problem is that when the page loads, the dive is appeared on the page and user doesn't have to click the button to see the content of the hidden div.
What can i do for that?
I want the div to stay hidden till user click the button to make it appear, not be appeared by default!

Edited by Niloofar24

5
Contributors
9
Replies
41
Views
2 Years
Discussion Span
Last Post by lps
0

Use CSS or JS first (on page load) to hide it, but which method or properties depends on how you want to show it on click.

What do you have so far?

0

This is my code.
How can i hide it by css or js first?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
body{
margin: 0;
}
/***************************************************************/

@font-face {
    font-family: 'secondFont';
    src: url('DancingScript-Regular.otf');
}

h2 {
font-family: 'secondFont', sans-serif;
font-size: 20px;
}

/***************************************************************/

.nav {
float: left;
margin-top: 5px; /* Added to dont overlap result box */
width: 100px;
height: 70px;
text-align: center;
background-color: #C2FFC2;
border-radius: 20px;
border: 2px dotted #C2FFC2;
}

.text {
overflow: hidden;
float: left;
margin: 5px;
padding: 5px;
width: 400px;
border-radius: 20px;
border-top: 2px dotted #C2FFC2;
border-bottom: 2px dotted #C2FFC2;
}

.text > p {
font-family: 'secondFont', sans-serif;
font-size: 20px;
margin-left: 10px;
}

#js-greenbox1 {
position: absolute;
z-index: 2;
width: 600px;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- ************************************************************* --->

<div id="js-greenbox1">
    <div class="nav"><h2>greeting</h2></div>
    <div class="text">
    <p>Welcome guest!</p>
    </div>
</div>

<!-- ************************************************************* --->

<script>
$(function(){
    $('.nav').click(function() {
        $('.text p').css({
            'width': $('.text p').width(),
            'height': $('.text p').height()
        });
        $('.text').animate({'width': 'toggle'});
    });
});
</script>

</body>
</html>

Edited by Niloofar24

0

@jstfsklh211, i found a problem that i didn't attention to it before.

Without using display: none;, the output was like this:

first picture

And the only problem was appearing the div befor clicking the button by default when the page loads.

But now with using display: none;; the output is like this:

second picture

Now when the page loads, the div is disappeared by default and user have to click the button to appear the div by toggling, and it's ok.

But the problem is that as you see in the second picture, the height of the div is less than before and also the text in the div is broke down. The text was "Welcome guest!" but the only word is able to see is "Welcome".

If i set an amount for div's height and make it more higher, then the word "guest!" will be appeared under the word "Welcome".
Something like this:

Welcome
guest!

Anyway, who can i fix it? What is the problem? Why it happend?

Edited by Niloofar24

0

elements with display none set have no high/width

you'd need to remove the display:none; before can resize/toggle

with what you have now it looks like your setting each p to 0:height/width
which is whats killing everything for you

0

Remove your code of

$('.text p').css({
    'width': $('.text p').width(),
    'height': $('.text p').height()
});

I tested with the code below combining your css script and it is working fine.

$('.nav').click(function() {
    /*$('.text p').css({
        'width': $('.text p').width(),
        'height': $('.text p').height()
    });*/
    $('.text').toggle("slow");
});
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.