AlexGH AlexGH - 2 months ago 9
Sass (Sass) Question

Expand collapse div using JQuery

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??):

<script>
/* expand */
$(".contact_item .head").click(function () {
$('.contact_item.expanded .head').next('div').slideUp();
$('.contact_item.expanded').removeClass('expanded');
$(this).parent('div').toggleClass('expanded');
$(this).next('div').slideDown();
});
</script>


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...

enter image description here

UPDATE

This is the html using f12, now the
<div class="contact_item">
has changed to
<div class="contact_item expanded">
but in Razor it doesn't happens :

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
@{ var locations = LocationLookup.GetLocations(); }
@{ int numloc = locations.Count / 2;}
@{ var newlist = locations.Take(numloc);}
@foreach (var loc in newlist)
{
<div class="contact_item ">
<div class="head">
<div class="name">@loc.Name office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/marker.png" alt=""></div>
@loc.Address @loc.Continued, @loc.City, @loc.PostCode, @loc.State
</li>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/phone.png" alt=""></div>
@loc.Phone
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
}
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
@for (int i = numloc; i < locations.Count; i++)
{
<div class="contact_item ">
<div class="head">
<div class="name">@locations[i].Name office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/marker.png" alt=""></div>
@locations[i].Address @locations[i].Continued, @locations[i].City, @locations[i].PostCode, @locations[i].State
</li>
<li>
<div class="icon"><img src="//lig.azureedge.net/public/UK/Content/Images/phone.png" alt=""></div>
@locations[i].Phone
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
}
</div>
</div>
</div>

This is the html code using F12 in the browser, in here there is
<section class="hidden-print" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3"> </div>
<div class="col-lg-9 col-md-9 col-sm-9 white">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div class="title">Contact us</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">



<div class="contact_item expanded">
<div class="head">
<div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: block;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One Embarcadero Center Suite 500, San Fransisco, 94111, CA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(415)690-6214
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
111 2nd Avenue NE Suite 1101, St. Petersburg, 33701, FL
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(727) 578-2800
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
Lloyd’s Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(0207) 101-9395
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact_item">
<div class="head">
<div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
4449 Easton Way 2nd Floor, Columbus, 43219, OH
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(614)526-8754
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item">
<div class="head">
<div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info" style="display: none;">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
One International Plaza Suite 550, Philadelphia, 19113, PA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(215)554-6777
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
950 Echo Lane Suite 200, Houston, 77024, TX
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(281)653-6472
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="contact_item ">
<div class="head">
<div class="name">Washington office<span class="plus">+</span> <span class="minus">-</span></div>
</div>
<div class="info">
<ul>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div>
1100 Dexter Avenue North Suite 100, Seattle, 98109, WA
</li>
<li>
<div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div>
(253)271-9692
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>

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