Custom jquery accordion slide effect
For those who can't wait here fiddle :)
So here's what I'm trying to do. I already have this custom layered accordion. And what I am trying to change about my output is the behavior of the accordion.
Instead of logic (When I click on "title", "sub-title" goes down as well as "content")
I want the logic to be (when I click on "heading", "the heading will slide to the left and obviously hidden, and the" subhead "will replace the heading position and clicking on the" subheading "will also allow the" content "to replace the" subheading "position "and" subtitle "will also move to the left, and when closed, it will behave the other way around. right)
I know my explanation above is a little bit because I really don't know how to put it right. :) But I have these images below to illustrate more of what I am trying to say.
The pink background is the main container and the only place where the "title", "subhead" and "content" will be visible. Appearance pink is not displayed on output.
A quick overview of my jQuery code because I can't post it without putting a little code :)
JQuery
$('body').on('click', '.title-a1', function() {
$('.box-a5').slideUp();
$('.in').show();
$('.out').hide();
var currentv1 = $(this).closest('.box-a2').find('.box-a5');
var triggerv1 = $(this).find('.in');
var triggerv2 = $(this).find('.out');
if (currentv1.is(':visible')) {
currentv1.slideUp();
triggerv1.show();
triggerv2.hide();
} else {
currentv1.slideDown();
triggerv1.hide();
triggerv2.show();
}
});
Your responses are greatly appreciated. Thank you in advance:)
UPDATED:
I have this fiddle from the below vCode answer . This works great and it answers my question, but I have a situation like this where I have a lot of titles as well as sub-titles as well as content. The problem is I don't know how to do it with a situation like this. I'm going new with such a regular accordion.
Please check my updated fiddle .
source to share
For those who have the same question as mine, I will already solve this. Check this out.
JQuery code summary:
$('.wrapper-l1 h1').on('click', function () {
var c = $(this).attr("class");
$("#" + c).show();
$(this).closest('div').animate({
marginLeft: '-400px'
});
});
$('.wrapper-l2 div h1').on('click', function() {
var d = $(this).attr("class");
$("#" + d).show();
$('.wrapper-l1, .wrapper-l2').animate({
marginLeft: '-400px'
});
});
$('.wrapper-l2 div .rights-a1').on('click', function() {
$('.wrapper-l1, .wrapper-l2').animate({
marginLeft: 0
});
$('.wrapper-l2 div').fadeOut();
});
$('.wrapper-l3 div .rights-a2').on('click', function() {
$('.wrapper-l2, .wrapper-l3').animate({
marginLeft: 0
});
$('.wrapper-l3 div').fadeOut();
});
source to share
You can use jQuery function .animate()
combined with some css to accomplish this.
Html
<div class="row">
<div class="level level-1">Header <i class="fa fa-chevron-right"></i>
</div>
<div class="level level-2"> <i class="fa fa-chevron-left"></i>
Sub-Header <i class="fa fa-chevron-right"></i>
</div>
<div class="level level-3"> <i class="fa fa-chevron-left"></i>
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
CSS
.row {
white-space : nowrap;
width: 200px;
overflow: hidden;
}
.level {
display: inline-block;
height: 900px;
width: 200px;
vertical-align: top;
}
ul {
padding-left: 10px;
margin-top: 0px;
}
i {
cursor: pointer;
}
JQuery
$('i.fa-chevron-right').on('click', function () {
$(this).closest('div').animate({
marginLeft: '-200px'
});
});
$('.level-2 > i.fa-chevron-left').on('click', function () {
$('.level-1, .level-2').animate({
marginLeft: 0
});
});
$('.level-3 > i.fa-chevron-left').on('click', function () {
$('.level-2').animate({
marginLeft: 0
});
});
jsFiddle: http://jsfiddle.net/voveson/ca7dsedp/
source to share