CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
computer_smile
computer_smile

Reputation: 2227

JQuery toggle element based on click of another div

I have the beginnings of what I would like working but am afraid I'm not headed down a DRY path with my line of thinking.

Right now if you click any of the below divs it will hide or show a icon checkmark next to all the headers below.

I want only when a specific div is clicked to display the icon checkmark to the relevant header down the page.

What method should I use in my approach? The way I have it seemingly won't make sense down the road. Thanks for your attention and thanks for taking a look. 

<div class="row container">
  <div class="row offset1">
    <div class="span3 frustrate_topside">  
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
    <div class="span3 frustrate_topside">
        <div>
          <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
        </div>
    </div>
    <div class="span3 frustrate_topside">
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
  </div>
</div>

<div class="offset2 span6" id='container'>
  <h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>  
  <div class='content'>trouble</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
  <div class='content'> 80% completion rate.</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
  <div class='content'>joke on me</div> 
</div>

<script>  
$('div.frustrate_topside').click(function(){
  $('i').toggle();
});
</script>

Upvotes: 2

Views: 3989

Answers (1)

trismi
trismi

Reputation: 780

Here's a working JS fiddle for what you're asking for: http://jsfiddle.net/sTve6/1/ I don't have your file set up with the icons/images, so I used placeholder text of 'o' for each icon, and made the assumption that your icons start out hidden.

HTML: 

<div class="row container">
  <div class="row offset1">
    <div class="span3 frustrate_topside" for='q1'>  
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
    <div class="span3 frustrate_topside" for='q2'>
        <div>
          <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
        </div>
    </div>
    <div class="span3 frustrate_topside" for='q3'>
      <div>
        <p>Click here to only show icon-ok element next to relevant anecdotes!</p>
      </div>
    </div>
  </div>
</div>

<div class="offset2 span6" id='container'>
  <h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>  
  <div class='content'>trouble</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
  <div class='content'> 80% completion rate.</div>
  <hr>
  <h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
  <div class='content'>joke on me</div> 
</div>

CSS: 

.icon-ok 
{
 display:none;   
}​    ​

JS:

$('div.frustrate_topside').click(function(){
    var elt = $(this).attr('for');
    $("#" + elt).toggle();
});​

Upvotes: 2

Related Questions