Expand collapse div using JQuery

Question

I'm trying to understand this JQuery code, I need to do it this way, I would use other kind of function but I will need to follow this way, I need to fix something, when you click on the plus symbol it should expand and show some content, the plus symbol must change into a minus symbol and change the color , that works correctly, and when you click again now in the minus symbol it should collapse and show no content, but that doesn't work, when you click on the minus symbol it collapse and expand again, I'm new to Sass and they are using it in here, I'm not sure to understand some Sass code specially the &.expanded, what does it means? I can't find in my html a class called expanded, but it is used in the JQuery. They put the JQuery code inside the _Layout file.

JQuery functions($(".contact_item.expanded") ?? what does it means??):

And this is the Sass code I'm talking about, I don't understand very well the & sign:

 .contact_item {
        width: 100%;
        border: 1px solid #f1e7e0;
        background-color: #fcf6f5;
        margin: 3px 0px;
        float: left;

        &.expanded {
            .head .name {
                color: #f60;
            }

            .head .name span {
                border-color: #f60;
                color: #f60;

                &.plus {
                    display: none;
                }

                &.minus {
                    display: block;
                }
            }
        }

        .head {
            .name {
                font-family: "Tahoma";
                color: rgb(100, 100, 100);
                font-size: 11.1px;
                text-transform: uppercase;
                padding: 7px 15px;
                cursor: pointer;
                position: relative;

                span {
                    position: absolute;
                    display: block;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 1px solid #706f6f;
                    text-align: center;
                    right: 15px;
                    top: 7px;
                    font-size: 18px;
                    line-height: 17px;

                    &.minus {
                        display: none;
                    }
                }
            }
        }
    }

This is an image, you can see that CALIFORNIA OFFICE is expanded but when you click on the minus symbol it collapses and expands again...

UPDATE

This is the html using f12, now the

has changed to

but in Razor it doesn't happens :

       
                                    
                                        @{ var locations = LocationLookup.GetLocations(); }
                                        @{ int numloc = locations.Count / 2;}
                                        @{ var newlist = locations.Take(numloc);}
                                        @foreach (var loc in newlist)
                                        {
                                            
                                                
                                                    @loc.Name office+ -
                                                
                                                
                                                    
                                                        
                                                            
                                                            @loc.Address @loc.Continued, @loc.City, @loc.PostCode, @loc.State
                                                        
                                                        
                                                            
                                                            @loc.Phone
                                                        
                                                    
                                                    
                                                
                                            
                                        }
                                    
                                    
                                        @for (int i = numloc; i < locations.Count; i++)
                                        {
                                            
                                                
                                                    @locations[i].Name office+ -
                                                
                                                
                                                    
                                                        
                                                            
                                                            @locations[i].Address @locations[i].Continued, @locations[i].City, @locations[i].PostCode, @locations[i].State
                                                        
                                                        
                                                            
                                                            @locations[i].Phone
                                                        
                                                    
                                                    
                                                
                                            
                                        }



This is the html code using F12 in the browser, in here there is


                        
                            Contact us
                            
                                



                                        
                                            
                                                California office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        One Embarcadero Center Suite 500, San Fransisco, 94111, CA
                                                    
                                                    
                                                        
                                                        (415)690-6214
                                                    
                                                
                                                
                                            
                                        
                                        
                                            
                                                Florida office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        111 2nd Avenue NE Suite 1101, St. Petersburg, 33701, FL
                                                    
                                                    
                                                        
                                                        (727) 578-2800
                                                    
                                                
                                                
                                            
                                        
                                        
                                            
                                                London office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        Lloyd’s Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
                                                    
                                                    
                                                        
                                                        (0207) 101-9395
                                                    
                                                
                                                
                                            
                                        
                                
                                
                                        
                                            
                                                Ohio office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        4449 Easton Way 2nd Floor, Columbus, 43219, OH
                                                    
                                                    
                                                        
                                                        (614)526-8754
                                                    
                                                
                                                
                                            
                                        
                                        
                                            
                                                Pennsylvania office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        One International Plaza Suite 550, Philadelphia, 19113, PA
                                                    
                                                    
                                                        
                                                        (215)554-6777
                                                    
                                                
                                                
                                            
                                        
                                        
                                            
                                                Texas office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        950 Echo Lane Suite 200, Houston, 77024, TX
                                                    
                                                    
                                                        
                                                        (281)653-6472
                                                    
                                                
                                                
                                            
                                        
                                        
                                            
                                                Washington office+ -
                                            
                                            
                                                
                                                    
                                                        
                                                        1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
                                                    
                                                    
                                                        
                                                        (253)271-9692

Timothy Groote · Accepted Answer

First off, let's try to understand how jQuery selectors and SASS work.

a line that is intended to select elements in jQuery starts with the dollar sign ($) which is a shorthand for jQuery.

The selector is the parameter passed to this function. it works just like a CSS selector.

var elementsWithAppleClass = $(".apple");

will select all html elements that have the CSS class "apple"

The other thing is about how SASS works.

Sass is basically CSS with a bunch of syntactic sugar, so it becomes easier to write than normal CSS.

SASS allows you to nest CSS selectors. for instance :

.banana
{
   .pear
   {
      /* this style applies to all elements with the pear class 
         inside an element with the banana class */
   }
}

the & operator in SASS means that you are still referring to the above class, but what should happen if it also has the condition that follows.

.banana
{
   &.pear
   {
       /* this applies to elements that have the banana class, but */
       /* that also have the pear class */
   }
}

You could also use it to write styles for CSS states nested.

.banana
{
    &:hover
    {
       background-color:yellow;
       cursor:pointer;
    }
}

On to your immediate problem :

In order to fix your problem, all you have to do is check to see if the item you clicked is already expanded, and base your logic on that accordingly.

    /* expand */
    $(".contact_item .head").click(function () {

        if($(this).parent('div').hasClass('expanded'))
        {
           //this one is already expanded. we just need to collapse it.
           $(this).parent('div').toggleClass('expanded');
           $(this).next('div').slideUp();
        }
        else
        {
           //this one is not yet expanded. let's collapse all the other ones
           $('.contact_item.expanded .head').next('div').slideUp();
           $('.contact_item.expanded').removeClass('expanded');

           //now let's expand this one.
           $(this).parent('div').toggleClass('expanded');
           $(this).next('div').slideDown();
        }

    });

Demo jsfiddle here

Expand collapse div using JQuery

Answers (2)

Related Questions