How to click and descend a hidden part?

Question

How to click and descend a hidden part?

Navigation

#1 by (4 votes)
#2 by (2 votes)

2

I know the question is confusing, but it's the following, I made a jQuery code through codeacademy (jQuery Functions and Selectors 11.Click and Pull), and there teaches you to do an algorithm that I found very cool, but it only works there, in my browser it does not work, be it in firefox or in chrome. He is like this:

AndthenwhenyouclickSlideUp/Downitshouldlooklikethis:

ButinthebrowseritdoesnothappenwhenIclick.It'sjustliketheoneinthefirstimage.

$(document).ready(function(){
    $('.pull-me').click(function(){
        $('.panel').slideToggle('slow');
        });    
});

body {
    margin:0 auto;
    padding:0;
	width:200px;
    text-align:center;
}
.pull-me{
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}
.panel {
	background: #ffffbd;
    background-size:90% 90%;
    height:300px;
	display:none;
    font-family:garamond,times-new-roman,serif;
}
.panel p{
    text-align:center;
}
.slide {
	margin:0;
	padding:0;
	border-top:solid 2px #cc0000;
}
.pull-me {
	display:block;
    position:relative;
    right:-25px;
    width:150px;
    height:20px;
	font-family:arial,sans-serif;
    font-size:14px;
	color:#ffffff;
    background:#cc0000;
	text-decoration:none;
    -moz-border-bottom-left-radius:5px;
    -moz-border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
.pull-me p {
    text-align:center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Slide Panel</title>
        <script type="text/javascript" src="Slide.js"></script>
        <link rel="stylesheet" type="text/css" href="Slide.css"></link>
    </head>
    <body>
        <div class="panel">
        <br />
        <br />
        <p>Now you see me!</p>
        </div>
        <p class="slide"><div class="pull-me">Slide Up/Down</div></p>
    </body>
</html>

The three files are in the same folder and are named Slide.html, Slide.css, and Slide.js; Since both html and css were already done, I just did the javascript. I do not know if it's any configuration or something that has to be installed, but I do not think it's any of that.

If you can help me and explain what's wrong, I'd appreciate it.

Thank you.

javascript html css

asked by anonymous 19.11.2015 / 02:15

2 answers

How to sort an array dynamically with JS Angular? Joining multiple SQL queries into a single query

score 4 · Answer 1

Alternative with CSS3

Anyone interested can follow a version that does the proposed, but without using Javascript:

#slideout label {
  position: absolute;
  top: 2px;
  left: 75px; 
  width: 150px;
  color: #fff;
  background-color:#c00;
  text-align: center;
  border-radius: 0 0 6px 6px;

  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#slide {
  position: absolute;
  background-color:#fe9;
  width: 200px;
  height: 150px;
  top: -150px;
  left: 50px;
  border-bottom: 2px solid #c00;

  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#toggle:checked ~ label { top: 150px }
#toggle:checked ~ div { top: 0 }

.hide {display:none}

<div id="slideout">
  <input type="checkbox" class="hide" id="toggle">
  <div id="slide">
    Aqui vai seu texto.
  </div>
  <label for="toggle">abrir/fechar</label>
</div>

Click the run, above, to test running.

Brief explanation of what was done:

In order to have an open / closed state, we use a hidden checkbox . To trigger this checkbox, label for serves us well, because a click on label triggers the main control.

Since we have this toggle working, we use the :checked pseudo-selector to differentiate the open and closed CSS by changing the top property. For this, we use the "brother selector", the ~ , which acts on the controls at the same level as our checkbox.

To animate the descent and climb, we use transition-duration , also of the CSS itself. Since the only thing that changes when we trigger the checkbox property is top , the effect is vertical scrolling.

For the rest, we use CSS to stylize the slider , basically as an example.

score 2 · Answer 2

You need to add jQuery to your code.

Use the code below before your javascript code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Ex:

<!DOCTYPEhtml><html><head><title>SlidePanel</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="Slide.js"></script>
        <link rel="stylesheet" type="text/css" href="Slide.css"></link>
    </head>
    <body>
        <div class="panel">
        <br />
        <br />
        <p>Now you see me!</p>
        </div>
        <p class="slide"><div class="pull-me">Slide Up/Down</div></p>
    </body>
</html>

See working at link