jquery change class and inline style of a div when another div is clicked

4067 views jquery
9

this is my html -

<div id="5bdf3284466d57.18631639">
<div class="tm-collapse tmaccordion">
<h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
<span class="tcfa tm-arrow tcfa-angle-down"></span>
</h3>
<div class="tm-collapse-wrap closed" >      
<p>The display / glass of your device is broken, cracked or damaged or your touch screen no longer responds.</p>         
</div>
</div>
</div>

i have another div tag somewhere in the page which is

<div id="displayandglass">Display and glass</div>

i am trying to have a jquery click event so that when

<div id="displayandglass">Display and glass</div>

is clicked then the class and style of one of the above newsted div will change from -

<div class="tm-collapse-wrap closed" > 

to

<div class="tm-collapse-wrap" >

Because of the nested level, i am unable to do so. can someone please help.

answered question

1 Answer

13

Add a class to your div and use it as a selector.

function showData() {
  $(".description").css('display', 'block');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="5bdf3284466d57.18631639">
  <div class="tm-collapse tmaccordion">
    <h3 class="tm-epo-field-label tm-section-label tm-toggle">Display and glass
      <span class="tcfa tm-arrow tcfa-angle-down"></span>
    </h3>
    <div class="tm-collapse-wrap closed description" style="display: none;">
      <p>The display / glass of your device is broken, cracked or damaged or your touch screen no longer responds.</p>
    </div>
  </div>
</div>


<div id="displayandglass" onclick="showData()">Display and glass</div>

posted this

Have an answer?

JD

Please login first before posting an answer.

Ads

Categories