jQuery Forum

Toggle (slideIn / FadeOut) multiple Divs in the same place by individual menu items
[3Replies]
- 06-Nov-2014 06:10 PM
- Forum: Using jQuery
Hi everybody,
since two days I am trying different jQuery codes to get the above described result, but didn't get the result I want yet :(

Now I just hope you, the experts here, can help me out a little with that.

I've deleted my old attempts, so it's not too confusing. I'm sure it's just an easy thing for you guys and I really appreciate every help you can help me here.

Ok this is the html
2. <!DOCTYPE html>
3. <html>
4. <head>
5. <meta charset="utf-8">
6. <title>SlideIn</title>
7. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
9. <style>
10. body {
11. background-color: #000;
12. }
14. a {
15. color: #fff;
16. text-decoration: none;
17. }
19. header {
20. width:347px;
21. height:100px;
22. border: 0px solid yellow;
23. background-color: #c6c6c6;
24. margin-top: 5%;
25. margin-left: 5%;
26. }
28. footer {
29. border-top: 2px solid #C5C6C6;
30. /*
31. background-color: red;
32. */
33. bottom: 0;
34. left:0px;
35. right:0px;
36. margin-right: 5%;
37. margin-left: 5%;
38. position: absolute;
39. color: #C5C6C6;
40. }
42. footer div {
43. border-top:0px solid red;
44. /*
45. background-color: yellow;
46. */
47. width: 100%;
48. text-align: right;
49. color: #C5C6C6;
50. }
52. footer div ul {
54. }
56. footer div ul li {
57. font-size: 2em;
58. list-style-type: none;
59. display: inline;
60. padding-left: 0.5%;
61. color: #C5C6C6;
62. }
64. footer div ul li:hover {
65. color: #fff;
66. }
67. </style>
69. </head>
71. <body>
72. <header></header>
74. <content>
75. 
76. </content>
78. <footer>
79. <div>
80. <ul id="icons">
81. <a href="#"><li id="link_1">Link1</li></a>
82. <a href="#"><li id="link_2">Link2</li></a>
83. </ul>
85. </div>
86. </footer>
88. <script src="script.js"></script>
89. <script>
91. </script>
93. </body>
94. </html>
What I'd like to do is sliding up a content div when clicking one of the menu items on the bottom right side.

By clicking the same link or a Close-Link inside the wrapperDiv it should slide down again.

When the contentDiv for Link1 is visible and you click Link2, the whole wrapperDiv for Link1 should fade out and wrapperDiv for Link2 should slide up.

Hope I could explain it fair enough. Sorry for my not sooo good english, I'm a little bit out of practise.... just as I am with coding :-)

Thank you in advance!

Please help: jQuery Accordeon Slider doesn't slide
[0Replies]
- 12-Apr-2012 09:51 AM
- Forum: Using jQuery
Hi erverybody,
I'm trying to build an accordeon slider, but somehow it doesn't slide like it should. I'm on since a few days now, but can't get it working as it should. Could you please take a look here?

I don't think it is a big thing.... guess I just overlook something stupid

It shall look like this one

Appreciate every help or suggestion.
Thanks in advance.

jQuery UI Slide - no complete hide?!?
[3Replies]
- 23-Feb-2011 08:11 AM
- Forum: Using jQuery
Hi everybody,

I'm very new to jQuery and now playing around a little to learn for a new project. Is it somehow possible to set the UI slide effect so that it doesn't fully hide away?

e.g. my div is width:300px I have set the distance:220px. So it doesn't completely slide in... but still the left 80px hide away after the slide. How can I set it that this stays visible?? Or is there a workaround for this??

Appreciate every help!!

Thanks in advance!

Response title

Attachments

jQuery Forum

Activity Trend