Using a function on a singular element

Question

Using a function on a singular element

I'm currently working on my portfolio and I would like to organize my projects in a menu similar to this felipestoker.com

When you click on Works, it displays a menu with my projects categorized. However, when I click on a category, all of them appear. Refer to this image:

Here is the outcome:

How can I resolve this issue?

A snippet of my code:

$(".worksList h2").click(function() {
  $(".worksList ul").slideDown();
  $(".worksList i").removeClass("fa-plus-square-o");
  $(".worksList i").addClass("fa-minus-square-o");
});

#works {
  width: 300px;
  height: 100%;
  background: #474747;
  position: fixed;
  right: 0;
  top: 0;
  ;
  *display: none;
  */ z-index: 3;
  padding: 20px;
  box-sizing: border-box;
}
#works span {
  font: 700 23px/23px"Open Sans";
  text-transform: uppercase;
  color: white;
  text-align: left;
  display: inline-block;
}
.worksList h2 {
  font: 300 15px/30px"Open Sans";
  color: #d9cfcf;
  text-transform: uppercase;
  text-align: left;
}
.worksList h2:hover {
  color: white;
}
.worksList h3 {
  font: 700 15px/30px"Open Sans";
  color: #fff;
  text-transform: uppercase;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}
.display-block {
  display: block
}
.display-inline-block {
  display: inline-block;
}
.display-table-cell {
  display: table-cell;
}
.display-none {
  display: none;
}
/*BACKGROUND*/

.background-white {
  background: #fff
}
.background-gray47 {
  background: #474747
}

<div id="works"><span class="worksClose cursor-pointer">X   Fechar</span>
  <span class="bar background-white margin-top-30 margin-bottom-30"></span>

  <div class="worksList">
    <!-- Series -->
    <h2 class="text-align-center cursor-pointer">
<i class="fa fa-plus-square-o"></i>
Series
</h2>
    <ul class="display-none">
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.lilyhammer.com.br">
          <img class="float-left" src="./images/1.png" alt="Lilyhammer" title="Lilyhammer" width="30" height="30" />
          <h3 class="float-left margin-left-15">Lilyhammer</h3>
        </a>

      </li>
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.punhodeferro.com.br">
          <img class="float-left" src="./images/1.png" alt="Punho de Ferro" title="Punho de Ferro" width="30" height="30" />
          <h3 class="float-left margin-left-15">Punho de Ferro</h3>
        </a>

      </li>
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.westworld.com.br">
          <img class="float-left" src="./images/1.png" alt="West World" title="West World" width="30" height="30" />
          <h3 class="float-left margin-left-15">West World</h3>
        </a>
      </li>
    </ul>
    <!-- Special Mention -->
    <h2 class="text-align-center cursor-pointer">
<i class="fa fa-plus-square-o"></i>
Special Mention
</h2>
    <ul class="display-none">
      <li class="display-block grid_100p margin-top-10">
        <a class="display-inline-block" href="http://www.pulpfiction.com.br">
          <img class="float-left" src="./images/pulp.png" alt="Pulp Fiction Brasil" title="Pulp Fiction Brasil" width="30" height="30" />
          <h3 class="float-left margin-left-15">Pulp Fiction Brasil</h3>
        </a>

      </li>
    </ul>
  </div>
</div>

jquery html css

Answer 1

Answer №1

To effectively target the desired clicked element, you can utilize .each() and .eq() as shown below:

$(".worksList h2").each(function (i) {
    $(this).click(function () {
        $(".worksList ul").slideUp().eq(i).slideDown();
        $(".worksList").find("i").removeClass("fa-plus-square-o").eq(i).addClass("fa-minus-square-o");
    });
});

Important: The addition of .slideUp() ensures that previously expanded elements will close when a new one is selected. Some refinement may be necessary

UPDATE: The updated code allows for toggling the lists with each click

jQuery(document).ready(function ($) {
    $(".worksList h2").each(function (i) {
        $(this).click(function (e) {
            e.preventDefault();
            var _this = $(this);
            var _parent = _this.parent(".worksList");
            var _sibling = _this.next("ul");
            if (_sibling.hasClass("expanded")) {
                _sibling.slideUp(function () {
                    _parent.find("i").addClass("fa-plus-square-o").removeClass("fa-minus-square-o");
                }).removeClass("expanded");
            } else {
                $(".worksList").find("ul").slideUp(function () {
                    $(".worksList").find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
                }).removeClass("expanded").eq(i).slideDown(function () {
                    _parent.find("i").eq(i).removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
                }).addClass("expanded");
            }
        })
    });
}); // ready

Answer 2

To effectively target the desired clicked element, you can utilize .each() and .eq() as shown below:

$(".worksList h2").each(function (i) {
    $(this).click(function () {
        $(".worksList ul").slideUp().eq(i).slideDown();
        $(".worksList").find("i").removeClass("fa-plus-square-o").eq(i).addClass("fa-minus-square-o");
    });
});

Important: The addition of .slideUp() ensures that previously expanded elements will close when a new one is selected. Some refinement may be necessary

UPDATE: The updated code allows for toggling the lists with each click

jQuery(document).ready(function ($) {
    $(".worksList h2").each(function (i) {
        $(this).click(function (e) {
            e.preventDefault();
            var _this = $(this);
            var _parent = _this.parent(".worksList");
            var _sibling = _this.next("ul");
            if (_sibling.hasClass("expanded")) {
                _sibling.slideUp(function () {
                    _parent.find("i").addClass("fa-plus-square-o").removeClass("fa-minus-square-o");
                }).removeClass("expanded");
            } else {
                $(".worksList").find("ul").slideUp(function () {
                    $(".worksList").find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
                }).removeClass("expanded").eq(i).slideDown(function () {
                    _parent.find("i").eq(i).removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
                }).addClass("expanded");
            }
        })
    });
}); // ready

Answer 3

Answer №2

Give this snippet a shot

$(".clickableList").on("click", function() {
  $(this).find("header ul").slideDown();
  $(this).find("header i").removeClass("icon-plus").addClass("icon-minus");
});

Answer 4

Give this snippet a shot

$(".clickableList").on("click", function() {
  $(this).find("header ul").slideDown();
  $(this).find("header i").removeClass("icon-plus").addClass("icon-minus");
});

Answer 5

Answer №3

It appears that currently,

$(".worksList h2").click(function() {
  $(".worksList ul").slideDown();
  $(".worksList i").removeClass("fa-plus-square-o");
  $(".worksList i").addClass("fa-minus-square-o");
});

The code above is targeting all ul elements in the .worksList. This is causing all lists to expand. To make the event more specific, it should be tied to the particular element, and then target the next ul based on the code.

For example:

$(".worksList h2").click(function() {
  $(this).next("ul").slideDown();
  ...
});

To make it specific to each h2 heading, you must specify each heading individually. Thus, encapsulate the function like this:

jQuery(document).ready(function ($) {
    $(".menu-title").each(function(i) {
        $(this).click(function (e) {
            e.preventDefault();
            $(this).next("ul").slideDown();
        });
    });
});

At some point, sliding up the menu might be necessary as well.

A faster alternative could be using slideToggle like this:

jQuery(document).ready(function ($) {
    $(".menu-title").each(function() {
        $(this).click(function (e) {
            e.preventDefault();
               $(this).next("ul").slideToggle();
        });
    });
});

Logic should be implemented to add/remove different classes to the i icon. The following code checks if the clicked menu h2 has a fa-plus-square-o class icon and adjusts it accordingly.

if ($(this).find("i").hasClass("fa-plus-square-o")) {
               $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
               } else {
                   $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
               }

Combining all the code:

jQuery(document).ready(function ($) {
    $(".menu-title").each(function() {
        $(this).click(function (e) {
            e.preventDefault();
            $(this).next("ul").slideToggle();
            if ($(this).find("i").hasClass("fa-plus-square-o")) {
              $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            } else {
               $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
               }
        });
    });
});

For a demo, visit the jsFiddle link: http://jsfiddle.net/63n4wyov/2/

Answer 6

It appears that currently,

$(".worksList h2").click(function() {
  $(".worksList ul").slideDown();
  $(".worksList i").removeClass("fa-plus-square-o");
  $(".worksList i").addClass("fa-minus-square-o");
});

The code above is targeting all ul elements in the .worksList. This is causing all lists to expand. To make the event more specific, it should be tied to the particular element, and then target the next ul based on the code.

For example:

$(".worksList h2").click(function() {
  $(this).next("ul").slideDown();
  ...
});

To make it specific to each h2 heading, you must specify each heading individually. Thus, encapsulate the function like this:

jQuery(document).ready(function ($) {
    $(".menu-title").each(function(i) {
        $(this).click(function (e) {
            e.preventDefault();
            $(this).next("ul").slideDown();
        });
    });
});

At some point, sliding up the menu might be necessary as well.

A faster alternative could be using slideToggle like this:

jQuery(document).ready(function ($) {
    $(".menu-title").each(function() {
        $(this).click(function (e) {
            e.preventDefault();
               $(this).next("ul").slideToggle();
        });
    });
});

Logic should be implemented to add/remove different classes to the i icon. The following code checks if the clicked menu h2 has a fa-plus-square-o class icon and adjusts it accordingly.

if ($(this).find("i").hasClass("fa-plus-square-o")) {
               $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
               } else {
                   $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
               }

Combining all the code:

jQuery(document).ready(function ($) {
    $(".menu-title").each(function() {
        $(this).click(function (e) {
            e.preventDefault();
            $(this).next("ul").slideToggle();
            if ($(this).find("i").hasClass("fa-plus-square-o")) {
              $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            } else {
               $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
               }
        });
    });
});

For a demo, visit the jsFiddle link: http://jsfiddle.net/63n4wyov/2/

Using a function on a singular element

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

Unable to adjust font for headings using CSS and Bootstrap

Personalizing the Twitter Embedded Timeline

Tips for retrieving a variable from a $.getJSON function

Angular's scope allows for the application of CSS classes exclusively to the first div element

A guide on developing a Website Tour using jQuery

Dynamic table sorting with JQuery using ajax for automatic updating of the table's header and body sections

Trigger a popup notification with JavaScript when

Errors in AJAX calls can sometimes result in an "ERR_EMPTY_RESPONSE" being

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

What is the best way to load all elements on a webpage while utilizing an HTML parser?

Modify the class of an input while typing using Jquery

Gradient transition effect changing background color from bottom to top

What could be causing the tabs to disappear from the Material UI tab component in my React project?

"Enjoy a full-screen background that adjusts its height while you scroll

What is the best way to ensure the content div fills all available space? (JQM compatibility concerns)

Separating a picture into distinct sections

Add Text to Bootstrap Modal Window

What is the maximum number of files that FileUploader can accept when multi-select is enabled?

Making a CSS table fit perfectly inside a container