how can I select a specific class inside a specific div based on the ID from a button elsewhere on the page

<div class="box top"></div>
      <div class="box main">
        <div class="box header">
           <div class="badge"><ul><li class="active"><span>60</span></li></ul></div>
          <div class="calendar_icon"></div>
<div id="mytoggle"><ul>
<li class="expand boxminimize" rel="_calendar"><span>Calendar</span></li></ul></div>            
        </div>
        
        <div class="minimizer_calendar"><div id="calendar_wrap">
            <div id="calendar"></div>
        </div></div>
        
      </div>
      <div class="box bottom"></div>

<div class="box top"></div>
      <div class="box main">
        <div class="box header">
           <div class="badge"><ul><li class="active"><span>60</span></li></ul></div>
          <div class="alerts_icon"></div>
<div id="mytoggle"><ul>
<li class="expand boxminimize" rel="_alerts"><span>Alerts</span></li></ul></div>            
        </div>
        
        <div class="minimizer_alerts"><div id="alerts_wrap">
            <div id="alerts"></div>
        </div></div>
        
      </div>
      <div class="box bottom"></div>

JQUERY CODE:

$('.expand').click(function () {
           var rel = $(this).attr('rel');
           var divToSlide = $('div.minimizer'+ rel);
               if (divToSlide.is(':hidden'))
               {
                   $(this).removeClass('boxexpand').addClass('boxminimize');
                   divToSlide.slideDown('slow');
               } else
               {
                   divToSlide.slideUp();
                   $(this).removeClass('boxminimize').addClass('boxexpand');
               }
           }
   );

});

ok. The above code works PERFECTLY when I click the minimize button with the class ".expand" I have a click function and when it executes it checks my tag "rel" and sees a name _alerts or _calendar. then it looks for a div with a class named minimize_alerts or which ever button I press... minimize_calendar For the sake of this post, I have only added two but there are like 9 or even more.

now... I would rather not have a function bound to .expand click but something universal (in case I want to call it from another button NOT involving the .expand class (which is where my little minimize buttons are).

maybe another paragraph has a link that allows the boxes to expand.

I've gotten this working but I can't get the minimize buttons to change from a - to a + because I can't figure out how to target the SPECIFIC minimize button that involves the same div I am calling. Here is the code I am triyng to use.

function Minimize (name) {
   var divToSlide = $('div.minimizer'+ name);
   if (divToSlide.is(':hidden')) {
       $(this).removeClass('boxexpand').addClass('boxminimize');
       divToSlide.slideDown('slow');
   } else {
       divToSlide.slideUp();
       $(this).removeClass('boxminimize').addClass('boxexpand');
   }
}

What is happening is $(this) is no longer based on .expand being the (this) that is clicked.

like if i have a button SOMEWHERE randomly on the page with this

<div onclick="Minimize('_alerts');">Click Here</div>

this will minimize alerts but because the (this) in minimize function doesn't actually point to the right button that I want to add a class to.

Is there a way to modify the minimize function so that it finds the <div id="mytoggle"><ul>
<li class="expand boxminimize" rel="_alerts"> using the rel toggle, and then changes the class of the li from expand boxminimize to boxexpanded??

just like the .expand click function I posted on the top of the post that works?

Topic Participants
zurie

how can I select a specific class inside a specific div based on the ID from a button elsewhere on the page

how can I select a specific class inside a specific div based on the ID from a button elsewhere on the page

Topic Participants

zurie