Sk Asraf Sk Asraf - 5 months ago 7
jQuery Question

how to open a accordion when click a span which out side of heading

i cant open a accordion from out side of heading

in my case there have a div with id accordion

<div id="accordion">
<h3 style="width:400px;">Product Description</h3>
<div>Content Panel 1</div>
<h3 style="width:400px;">Product Specification</h3>
<div>Content Panel 2</div>

<h3 style="width:400px;">Shiping+Return Polices</h3>
<div>Content Panel 3</div>
<h3 style="width:400px;" id="ac">Product Reviews</h3>
<div id="newdivratting">

</div>
<h3 style="width:400px;">QuestionAnswer</h3>
<div id="QuestionAnswer">
</div>
<h3 style="width:400px;">Close All</h3>
<div>Closed.</div>
</div>


and a span tag which is outside of accordion

<span style="padding:10px;" class="span-click" id="reviewread">Click me</span>


and i am trying to when click this span then open 4th accordion where heading is Product Reviews

my jquery code is

$("#reviewread").click(function () {
$("accordion>#ac").accordion("activate", true);
// $('html,body').animate({
// scrollTop: $("#newdivratting").offset().top
// },
// 'slow');
});


how can i fixed it please help.

Jai Jai
Answer

You can trigger the click at the target element:

$("#accordion").accordion();
$("#reviewread").click(function(e) {
  $("#ac").trigger("click");
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<span style="padding:10px;" class="span-click" id="reviewread">Click me</span>
<div id="accordion">
  <h3 style="width:400px;">Product Description</h3>
  <div>Content Panel 1</div>
  <h3 style="width:400px;">Product Specification</h3>
  <div>Content Panel 2</div>

  <h3 style="width:400px;">Shiping+Return Polices</h3>
  <div>Content Panel 3</div>
  <h3 style="width:400px;" id="ac">Product Reviews</h3>
  <div id="newdivratting">

  </div>
  <h3 style="width:400px;">QuestionAnswer</h3>
  <div id="QuestionAnswer">
  </div>
  <h3 style="width:400px;">Close All</h3>
  <div>Closed.</div>
</div>

Comments