Jquery change css of nested div

I am having a spot of bother with jquery and being a bit of a novice with it here's my problem:

I am making a drop down panel menu, Ive got the drop down ok but need to affect the background image of a div that is nested inside the div which is clicked to trigger the action. ie ".side_bar_top_text" is the div that's background needs to be changed.

jquery:

<script type="text/javascript">
$(document).ready(function () {
 $('.side_bar_top').click(function(){
    if ($(this).attr('class') != 'active'){
      $('.side_bar .side_bar_panel', this).slideUp();
      $(this).next().slideToggle();
      $(this).removeClass('active');
      $(this).addClass('active');

    }
  });
});
 </script>

html:

 <div class="side_bar_top"><div class="side_bar_top_text">COMMERCIAL CONSTRUCTION</div></div>
 <div class="side_bar">
  <div class="side_bar_panel">
   /*the list of elements*/
  </div>
 </div>

All I need to do is change the background image of side_bar_top_text via css when the panel is up and vice versa. I've tried various methods with no luck. Can anyone help?

Answers


Would something like this help you? http://jsfiddle.net/jgQx3/2/

CSS:

.side_bar_top {
  background: url(path/file1.jpg);
}

.side_bar_top.active {
  background: url(path/file2.jpg);
}

SCRIPT:

$(document).ready(function () {
  $('.side_bar_top').on('click', function(){
    var $this = $(this);

    $this.toggleClass('active');
    $this.next('.side_bar').slideToggle();
  });
});

HTML:

<div class="side_bar_top active">
  <div class="side_bar_top_text">COMMERCIAL CONSTRUCTION</div>
</div>
<div class="side_bar">
  <div class="side_bar_panel">
    /*the list of elements*/
  </div>
</div>

This function does not collapse already open options though.


To get the element side_bar_top_text which is a child of the clicked element, do:

$(this).find('side_bar_top_text');

To change the background:

$(this).find('side_bar_top_text').css('background-image', '<your_image>');

In CSS:

.side_bar_top .side_bar_top_text{
    background:url(path-to-original-image.jpg); //whatever you want
}

.side_bar_top.active .side_bar_top_text{
    background:url(path-to-image.jpg); //whatever you want
}

But if you have a specific image for each or some other reason to do it in jquery:

$(document).ready(function () {
 $('.side_bar_top').click(function(){
    $(this).siblings().removeClass('active');

    if ($(this).attr('class') != 'active'){
      $('.side_bar .side_bar_panel', this).slideUp();
      $(this).next().slideToggle();
      $('.side_bar .side_bar_panel', this).removeClass('active');
      $(this).addClass('active');

      $(this).find('.side_bar_top_text').css('background', 'url(path-to-image.jpg)');

    }
  });
});

Edit:

In css you can see that we override the background for active class. The original image is defined above. This method requires jquery to add and remove the active class on click.

I added this line to your listener:

$(this).siblings().removeClass('active');

which should remove active for every sibling of the clicked element. That should restore your original image.


Need Your Help

Delete white spaces in textbox when copy pasted with jquery

javascript jquery asp.net-mvc asp.net-mvc-3

I've a textbox of order id(7 digits), which in normal cases you copy paste from email to the textbox, many times you accidently copy one or two white spaces which causing annoying validation error....

Replace a dropdown list in the last row of a table with text

jquery html table select drop-down-menu

I have an html table and in one column i have dropdown select. i would like a selector to get a handle to the dropdown in the last row of the table and change it to just regular text (using the va...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.