JQuery horizontal slide effect
Question
I'm trying to get this done: When user clicks on one of the boxes, the following should happen: box changes color, slides to the left and the text for this subject becomes visible (like in these images for illustration)
Can anyone point me in a right direction or solution for this matter?
Help would be really appreciated!
I came up with this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/jquery.zaccordion.js"></script>
<style type="text/css">
/* Just some styles to set the page layout. */
* {margin:0;padding:0;font-family:Arial, Verdana, sans-serif;}
body {padding:20px;line-height:20px;font-size:12px;color:#000;}
h1 {font-size:18px;margin:10px 0;line-height:1;}
h2 {font-size:14px;margin:10px 0;line-height:1;}
p {font-size:12px;margin:10px 0;}
small {font-size:11px;margin:10px 0;color:#333;}
a {font-size:12px;text-decoration:none;color:#f00;}
p span {color:#00f;}
#container {width:960px;margin:0 auto;padding-bottom:40px;}
#examples {margin-top:60px;}
pre {font-family:"Courier New", Courier, monospace;font-size:11px;margin:20px 0 100px 0;border:1px dashed #ddd;padding:10px;background:#f6f6f6;}
pre.html {margin:10px 0;}
.clear {clear:both;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("pre.js").each(function(index) {
eval($(this).text());
});
});
</script>
</head>
<body>
<div id="container">
<div id="examples">
<style type="text/css">
#example10 li {position:relative;}
#example10 {border: 1px solid black;}
#example10 div.slider-info {top:0px;height:150px;left:0;position:absolute;width:846;}
#example10 div.slider-info h1 {font-size:61pt;background-color: white; color:black;border-right: 1px solid black;border-left: 1px solid black;width:115px;height:150px;padding-top: 35px;padding-left: 35px;margin-top: 0;float: left;}
#example10 div.slider-info p {display:none;float: left;padding-top: 50px;font-size:12px;line-height:14px;color:black;z-index: -1; margin:0 !important;}
#example10 li.slider-open div.slider-info p {display:inline;}
#example10 div.slider-info p.slider-text{font-size: 20px;color:black;}
</style>
<ul id="example10">
<li>
<div class="slider-info">
<h1 class="peerst">W</h1>
<p class="slider-text">1111111111111111111111111111111111111111111.</p>
</div>
</li>
<li>
<div class="slider-info">
<h1 class="peerst">W</h1>
<p class="slider-text">222222222222222222222222222222222222222222222.</p>
</div>
</li>
<li>
<div class="slider-info">
<h1 class="peerst">W</h1>
<p class="slider-text">333333333333333333333333333333333333333333333.</p>
</div>
</li>
<li>
<div class="slider-info">
<h1 class="peerst">W</h1>
<p class="slider-text">44444444444444444444444444444444444444444.</p>
</div>
</li>
</ul>
<pre class="js">
$(document).ready(function() {
$("#example10").zAccordion({
auto: false,
width: 1300,
speed: 2000,
slideClass: "slider",
slideWidth: 846,
height: 150
});
});
</pre>
</body>
</html>
which actually works only for some reason the text (class: slider-text) doesn't get displayed at all, I've tried multiple things but I can't get it to display into the accordion. Any solutions?
1 answers
solution1
1 ACCPTED 2015-01-21 13:16:17
What you're making looks like a heavily-styled/customised accordion .
You haven't posted any details of your current implementation so it's hard to advise on next steps, but how about basing the implementation on the jQuery accordion and styling it to match your mock-up?
Here are some related questions:
Edit after OP posted code attempt:
It looks like you grabbed an example from this page , which is not going to work out of the box as you have specific style requirements.
First of all, add the property auto: false to the accordion Javascript to stop it from automatically playing the slideshow, causing the DOM to change so that it's impossible to debug. Use Chrome or Firefox Developer Tools (hit F12) and inspect the element that isn't being displayed. You'll see that the position is wrong - it's too far down. You can use CSS such as top: -125px and left: 200px (depending on the exact positioning you would like) to get the text to move up a bit and display. If you debug the example, you'll see that the CSS display: none stops the text of the "closed" items from displaying.
Going forward, please put a working example on JSFiddle and link to it. Add external resources such as jQuery in the sidebar, and use RawGit to link to files on github such as zAccordion. This is makes it much easier for people to view and debug. I had to take your HTML, save it locally, find zAccordion, import it, and make it work before I could begin to look at your attempt.
Hope that helps. Debugging will get you far - check which CSS rules are being applied after certain actions, such as opening or closing the items. When it gets more complex, move the JavaScript code into separate JS files so that you can debug it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.