0

I am having different div's on my website and I would like to do following

  • when I am clicking one link, that will trigger a change inside the css code of more than one div's. For example if I click on clients I would like to make the ul element with class="rslides" to get property of heigh="0px" and than another div layer to expand below this one.

But I have 2 problems:

  1. first is that I am using a responsive slider for which i to make its height="0px" , I have to change the class property.
  2. other issue is how to make one link trigger 2 actions for the second div. I tried with triggers but it is limited to one element per "id"

DOM Structure: 

    <div id="slider">
       <div id="index_slider">
         <ul class="rslides" >
             <li><img src="img/index_design_02.jpg"></li>
                 <li><img src="img/index_design_03.jpg"></li>                 
         </ul>
        </div>
    </div>

JS CODE:

<script src="js/responsiveslides.min.js"></script>
<script>
  $(function() {
    $(".rslides").responsiveSlides({
    speed: 1000,
    maxwidth: 1200
      });
  });
</script>



<div id="menu"><a href="#rslides">clients</a></div>
<div id="second_slider"></div>

THE CSS CODE fot the both tirgers of the slider:

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;  
  -webkit-transition:all 1s ease-in-out;

}

.rslides:target {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0; 
  height:0px;


}

Here is link to JSfiddle

where my goal is once clicked on the link the div called "menu" to go on the top with sliding transition and the other div called "second_slider" to expand on the bottom, and the slider to disapear.

John Siniger
  • 875
  • 2
  • 16
  • 39
  • to add a class to to any element, what you could do is use this `.addClass()` . were `` is a css class which would set the `height:0`. – dreamweiver Jan 31 '14 at 14:06
  • the second requirement i didnt get it *other issue is how to make one link trigger 2 actions or the second div.* what you meant by this ? – dreamweiver Jan 31 '14 at 14:07

1 Answers1

0

Depending on your markup, you should be able to target more than one div. The only limitation would be each target must a child of your link target.

<div class="rslides">
  <div id="target-a">
    <div class="sub-target-one"></div>
    <div class="sub-target-two"></div>
  </div>
</div>

The way you would go about it is like this:

.rslides:target > .sub-target-one,
.rsiides:target > .sub-target-two {
  /* rules go here */
}
beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • This will work on hover, how it will be on link click ? and here target-one and target-two will have the same properities, how we can do it for them to have different css styles ? – John Siniger Jan 31 '14 at 14:31
  • I'm not following, my understanding is the `:target` pseudo-class will work when you assign a target to a link, e.g., http://mylink.net#target. You may use `:active` for clicks but these are limited to when you are actually pushing the button. – beautifulcoder Feb 01 '14 at 13:44