CODEWITHSUNDEEP
jquery
TDG
TDG

Reputation: 1302

Show/Hide div container based on id value on list & div container

Simple logic need to be fixed.

If li has class name "selected" on id.. get that value and match with div container. If li & div id are same display that div container and hide other id containers.

HTML

<ul>
  <li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a></li>
  <li class="slist" id="ele2"><a href="javascript:;">Element 2</a></li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

JS

$('.slist').each(function () {
if($(this).hasClass('selected')) {
    var $filterEle = $('.' + this.id).fadeIn(600);
    $('.cwrapper .contentEle > div.content').not($filterEle).hide();
}
});

Thanks

Upvotes: 2

Views: 1366

Answers (3)

jcuenod
jcuenod

Reputation: 58405

I've slightly modified your javascript. I would hide all the .content elements to begin with.

Then you can just use your .selected class as a selector and run through that/those element(s) and show the associated div.

Try the snippet, I think it does what you're trying to accomplish.

$(".content").hide();
$('.slist.selected').each(function() {
  var $filterEle = $('.' + this.id).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
  <li class="slist" id="ele1"><a href="javascript:;">Element 1</a>
  </li>
  <li class="slist selected" id="ele2"><a href="javascript:;">Element 2</a>
  </li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
      [ele1] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
      [ele2] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

Additional Note:

There's nothing wrong with what you're doing but I agree with @RuubW (below), you should rather use data attributes for this. See this snippet (which works with both click and onload):

$(".content").hide();
$('.slist.selected').each(function() {
  $('.' + $(this).data("divId")).fadeIn(1000);
});
$('.slist').click(function() {
  var $that = this;
  $('.' + $('.slist.selected').data('divId')).fadeOut(500, function() {
    $('.slist.selected').removeClass('selected');
    $($that).addClass('selected')
    $('.' + $('.slist.selected').data('divId')).fadeIn(500)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
  <li class="slist selected" data-div-id="ele1"><a href="javascript:;">Element 1</a>
  </li>
  <li class="slist" data-div-id="ele2"><a href="javascript:;">Element 2</a>
  </li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
      [ele1] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
      [ele2] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

Upvotes: 0

Gvidas
Gvidas

Reputation: 1964

Problem may be that this.id is not always returns right value especially with jQuery functions, I suggest to use $(this).attr('id') instead. 

$('.slist').each(function () {
    if($(this).hasClass('selected')) {
       $('.cwrapper .contentEle > div.content').hide();
       $('.' + $(this).attr('id')).fadeIn(600);
    }
    });

Upvotes: 0

RuubW
RuubW

Reputation: 556

I would use HTML data-* attributes, they're widely supported and offer a lot of flexibility.

HTML

<ul>
    <li class="slist selected" id="ele1" data-div-link="ele1div"><a href="javascript:;">Element 1</a></li>
    <li class="slist" id="ele2" data-div-link="ele2div"><a href="javascript:;">Element 2</a></li>
</ul>

<div class="cwrapper">
    <div class="contentEle">
        <div class="content ele1div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
        <div class="content ele2div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
    </div>
</div>

JS

$('.cwrapper').find('div.content').hide();
$('.slist').each(function() {
    var $li = $(this);
    if($li.hasClass('selected')) {
        $('.' + $li.data('div-link')).fadeIn(600);
    }
});

Documentation:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes https://api.jquery.com/jquery.data/

Upvotes: 0

Related Questions