I have two div
s (left and right). If a link is clicked in the left div
, it should open data in the right div
where there are multiple questions. Each question is clickable and displays answers on click.
I have implemented the following, but when a question opens the previous question stays open and doesn't close. I tried using toggle
which closes the same link.
My JavaScript:
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle();
});
$('.innerdiv').hide();
$('.answer').click(function() {
$('#innerdiv' + $(this).attr('target')).toggle();
});
My HTML:
<div style="width: 30%; float:left">
<div class="buttons">
<ul>
<li><a class="show" target="1">Placing an Order</a></li>
<li><a class="show" target="2">blah.com Returns & Cancellations FAQs</a></li>
<li><a class="show" target="3">Brands & Stock</a></li>
<li><a class="show" target="4">Shipping & Delivery</a></li>
<li><a class="show" target="5">Payment</a></li>
<li><a class="show" target="6">Pricing</a></li>
<li><a class="show" target="7">Value Added Tax (VAT)</a></li>
<li><a class="show" target="8">Privacy & Security</a></li>
<li><a class="show" target="9">About the Company</a></li>
</ul>
</div>
</div>
<div style="width: 70%; float:right">
<div id="div1" class="targetDiv">
<ul>
<li><a class="answer" target="1">I need personal assistance with my order. Who can I contact?</a><div id="innerdiv1" class="innerdiv" >Our customer service centre is happy to assist you with your order on +91 124 6733300 (10 AM - 7 PM)</div></li>
<li><a class="answer" target="2" >How do I start a new account?</a><div id="innerdiv2" class="innerdiv">blah blah </div></li>
<li><a class="answer" target="3">I am having problems ordering through your website. What can I do?</a> <div id="innerdiv3" class="innerdiv"> hahahahah </div></li>
<li><a class="answer" target="4" >I need personal assistance with my order. Who can I contact?</a> <div id="innerdiv4" class="innerdiv"> b;la ablahhap </div></li>
<li><a class="answer" target="5" >How do I start a new account?</a><div id="innerdiv5" class="innerdiv">blah blah </div></li>
</ul>
</div>
</div>
See JSFiddle: http://jsfiddle.net/C59bE/8/
Why not just select all the innerdivs beforehand and hide them, before toggling the one that belongs to your target? http://jsfiddle.net/C59bE/9/
So that becomes:
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle();
});
$('.innerdiv').hide();
$('.answer').click(function(){
$('.innerdiv').hide();
$('#innerdiv' + $(this).attr('target')).toggle();
});
UPDATE: WORKING DEMO
Maybe this is what you are looking for:
$(this).parent().siblings().find('div[id*=innerdiv]').hide();
This selects all the other #innerdivs* and hide it.
Like:
$('.targetDiv').hide();
$('.show').click(function () {
$('#div' + $(this).attr('target')).toggle();
});
$('.innerdiv').hide();
$('.answer').click(function(){
$(this).parent().siblings().find('div').hide();
$('#innerdiv' + $(this).attr('target')).toggle();
});
You can try to hide all the innerdivs before displaying the one clicked on:
$('.answer').click(function(){
$(".innerdiv").hide();
$('#innerdiv' + $(this).attr('target')).toggle();
});
Thanx I got the answer using this very easily.
$('.answer').click(function(){
var $target = $('#innerdiv' + $(this).attr('target')).toggle();
$('.targetDiv .innerdiv').not($target).hide()
});
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.