ways to hide/show a div with a toggle in jQuery

Question

i'm looking into implementing something similar to the li's in chrome extension page. Should i use jQuery slideToggle? maybe someone can provide some sort of a sample code i could start off with? (i'm new to jQuery)

Please edit you question to make it more understandable – Starx Mar 27 '12 at 16:03 — Starx, Mar 27 '12 at 16:03
Tom look at my answer to see how to mimic that action. – aziz punjani Mar 27 '12 at 16:25 — aziz punjani, Mar 27 '12 at 16:25

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

Check out this post: jQuery & CSS - Remove/Add display:none

I think that it should work for hiding/showing.

edited May 23 '17 at 12:11

Community

1
1

answered Mar 27 '12 at 15:58

edhedges

2,722
2
28
61

score 0 · Answer 2 · answered Mar 27 '12 at 16:01

0

Its extremely hard to answer your question. But showing and hiding a div is very easy, just use .toggle()

$("#mydiv").toggle();

answered Mar 27 '12 at 16:01

Starx

77,474
47
185
261

but see how the div's are sliding upwards – Tom Mar 27 '12 at 16:02

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

You can try Jquery UI Accordion rather than inventing your own wheel. These link might help you.

http://docs.jquery.com/UI/Accordion

http://jquery.bassistance.de/accordion/demo/?p=1.1.2

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 27 '12 at 16:02

jems

128
5

No need for plugins, jquery will suffice. Look at my post. – aziz punjani Mar 27 '12 at 16:21
When I do need something I do little bit of googling first. I don't waste my time creating my own plugins when there are a lot of good plugins that has sophisticated features & BTW using plugins is not hard and complicated than writing your own code to mimic it. – jems Mar 27 '12 at 16:31
It's not complicated, it's rather easy. Complicated for someone who can't code, in that case, go ahead and include thousands of lines of code you don't really need. Your choice. Btw that plugin doesn't even really do what this post wants it to do. I'm not against plugins, just against the idea of not being able to think for yourself and realizing when something is simple and doesn't reaquire a bloated plugin. I did it in 8 lines, how many lines of code does that plugin you suggested have in it ? – aziz punjani Mar 27 '12 at 16:45

aziz punjani · Accepted Answer · 2012-03-27T16:53:50.467

You don't need any complicated plugins, you can do all of this with jquery. Here is a quick sample i whipped out. It's simple really.

The html

<div id="outer"> 
    <p>Some outer content </p>
   <div id="inner">Slider Content </div> 
</div>

The css

#outer{
   height: 200px; 
   width: 200px; 
   background-color: brown; 
   overflow: hidden; 
   position: relative;     
}
#inner{ 
    height: 200px;
    width: 100%;     
    background-color: green;
    position: absolute; 
    top: 100%; 
}

The JS

  $('#outer').hover(
    function(){
       $('#inner').animate({ top: '0%' }, 'easein' );  
    }, 
    function(){
       $('#inner').animate({ top: '100%' }, 'easein' );  
    }        
   );

Here it is in action.

ways to hide/show a div with a toggle in jQuery

4 Answers4