CODEWITHSUNDEEP
jqueryhtmlcssclickaddclass
Nicole
Nicole

Reputation: 29

Adding a class to a div by clicking on another div

I'm trying to build a website with a sidebar. When I click on an item in the sidebar, I want the text belonging to that topic to appear.

So far, I have this html in the body:

<nav class="menu">
 <ul>
  <li class="kategorie" id="links">
      <a href=#>Links</a>
  </li>
  <li class="kategorie" id="kontakt">
      <a href=#>Kontakt</a>
  </li>
  <li class="kategorie" id="fotos">
      <a href=#>Fotostrecke</a>
  </li>
 </ul>
</nav>

<div class="text">
 <h2>
    Fotos
 </h2>
</div>

And the following css:

.menu {
  float:left;
  width: 300px;
  background-color:white;
}

.text {
  opacity:0;
  float:left;
  background-color:white;
  position:absolute;
  left:350px;
  right:0;
  text-align:left:;
  font-family: Myriad Pro, sans-serif;
}

.visible {
  opacity:1;
}

I have added the following code in the head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
$(function() {
  $("#fotos").click(function() {
    $(".text").addClass('visible');
  });
});
</script>

But it still doesn't work. I'm still very much a beginner at jquery, so I suspect that's where the mistake is, but I can't find it.

Upvotes: 1

Views: 9978

Answers (2)

dbp
dbp

Reputation: 373

Maybe this is the issue?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#fotos").click(function() {
            $(".text").addClass('visible');
        });
    });
</script>

Upvotes: 1

Rastislav Struh&#225;r
Rastislav Struh&#225;r

Reputation: 125

try this

$(document).ready(function(){
   $(document).on('click','#fotos',function(){
      $(document).find('.text').addClass('visible');
   });
});

Upvotes: 1

Related Questions