Answers.Body: <p>I would rather suggest you think twice about using jQuery. But instead of listing my reasons for not using it, you may check this github article published in <strong>2018</strong>, <a href="https://github.blog/2018-09-06-removing-jquery-from-github-frontend/" rel="nofollow noreferrer">Removing jQuery from GitHub.com frontend</a> and its updated version <a href="https://github.blog/2021-05-04-how-we-use-web-components-at-github/" rel="nofollow noreferrer">How we use Web Components at GitHub</a></p>
  <p>Gitlab did the same as, <a href="https://gitlab.com/groups/gitlab-org/-/epics/3417" rel="nofollow noreferrer">Remove jQuery from GitLabs Frontend code</a></p>
  <p>So unless you have a specific need to jQuery (then we better discuss it, e.g <a href="https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/" rel="nofollow noreferrer">The WordPress Factor</a>), do not. For example, for learning purposes, I would rather suggest using  vanilla modern JS to do it.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-18T15:41:54.213Z
Answers.Text: Thanks for your input. It's not my decision to use jQuery. That belongs to the higher-ups. Nevertheless, I'll check out those links, and if I can put together a good argument for going away from jQuery I'll present it to the higher-ups and see if I can get buy in.
Answers.UserDisplayName: apex2022
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-16T02:38:10.423Z
Answers.LastActivityDate: 2023-05-16T03:44:57.080Z
Answers.LastEditDate: 2023-05-16T03:44:57.080Z
Answers.UserDisplayName: Qiulang 邱朗
Answers.Body: <p>One possibility is a kind of tabbed layout. It can be implemented with only a few basic tools like <code>hide</code>, <code>show</code> and <code>toggle</code>. To make it fancier, you can ask your student to add animations like <code>fadeIn</code> or changing the background color.</p>
  <p>Here's a <a href="https://codepen.io/alexlime/pen/DjYwJz" rel="nofollow noreferrer">codepen</a> example I found.</p>
  <p><a href="https://i.sstatic.net/KTVSt.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KTVSt.png" alt="a tab layout" /></a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-03T19:41:54.937Z
Answers.LastActivityDate: 2023-05-03T19:41:54.937Z
Answers.UserDisplayName: corvus_192
Answers.Body: <p>I guess my first thought would be <a href="https://jqueryui.com/" rel="nofollow noreferrer">jQuery UI</a>, which is possibly exactly what you are looking for.</p>
  <p>A secondary approach (which you should be probably doing in any case) is to make sure that you save past student projects.  You can choose to make these &quot;visible&quot; to current students, because over time they will create their own &quot;library&quot; of sorts, with internet search eventually being the lookup for snippets for the behaviors the students see.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-16T03:48:11.180Z
Answers.Text: But it is in in maintenance-only mode,  check here https://openjsf.org/blog/2021/10/07/jquery-maintainers-update-and-transition-jquery-ui/  So not sure if that is a good idea.
Answers.UserDisplayName: Qiulang 邱朗
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-16T08:10:35.433Z
Answers.Text: @Qiulang邱朗 Interesting! Even so, I don't think that negates its value for students trying to wrap their heads around jQuery for the first time. It's still a very useful resource.
Answers.UserDisplayName: Ben I.
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-16T09:26:44.907Z
Answers.Text: But you may further check my answer for "that negates its value for students trying to wrap their heads around jQuery for the first time."
Answers.UserDisplayName: Qiulang 邱朗
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-05-16T10:45:44.757Z
Answers.Text: @Qiulang邱朗 Interesting articles! I'm not enough into the webdev space to comment on whether their journey negates the value of jQuery entirely. I answered the question as asked, but you may we'll be right.
Answers.UserDisplayName: Ben I.
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-04-25T17:07:25.957Z
Answers.LastActivityDate: 2023-04-25T18:46:35.007Z
Answers.LastEditDate: 2023-04-25T18:46:35.007Z
Answers.UserDisplayName: Ben I.
Body: <p>I teach Web Foundations at a local code school. I give the students a final project where they have to develop some sort of website of their choosing. They have to have 5 pages of content, and they have to include a bit of JavaScript or jQuery. They know with jQuery how to add and remove and toggle a class. We've discussed much more than that, but that is what they have mainly absorbed. The projects are not required to be mobile ready, so they usually will not do a hamburger menu.</p>
  <p>I try giving my students ideas on what they can do to put jQuery in their site, but many times I run dry of ideas. A carousel seems like a lot of code and something that would be hard for them to do without simply copying the code from an article or page. I have suggested to someone to have a fake submit with an HTML form. But I'm trying to get more ideas.</p>
  <p>Does anyone know of a resource (web page, book, etc.) that specifically focuses on short jQuery scripts that can be added to a web page for a variety of purposes or effects? I would like to show my students such a resource so they could review it and maybe get ideas for things they could do themselves with not a lot of jQuery. Maybe take something from the ideas and morph it into their own thing.</p>
  <p>I know Codepen has many examples of things involving a bit but not a ton of jQuery. The problem with Codepen is that there is no way to do any sort of focused filter or search for such types of projects (which would have to filter out things such as SCSS since they are just learning basics). I'm just hoping maybe someone has put out a resource specifically about short jQuery scripts.</p>
  <p>Thanks!</p>
  
Tags: <javascript>
Title: Resource for short jQuery additions to websites
ThreadText: # Resource for short jQuery additions to websites
  
  (Asked by: username_0 on 2023-04-25)
  
  I teach Web Foundations at a local code school. I give the students a final project where they have to develop some sort of website of their choosing. They have to have 5 pages of content, and they have to include a bit of JavaScript or jQuery. They know with jQuery how to add and remove and toggle a class. We've discussed much more than that, but that is what they have mainly absorbed. The projects are not required to be mobile ready, so they usually will not do a hamburger menu.
  
  I try giving my students ideas on what they can do to put jQuery in their site, but many times I run dry of ideas. A carousel seems like a lot of code and something that would be hard for them to do without simply copying the code from an article or page. I have suggested to someone to have a fake submit with an HTML form. But I'm trying to get more ideas.
  
  Does anyone know of a resource (web page, book, etc.) that specifically focuses on short jQuery scripts that can be added to a web page for a variety of purposes or effects? I would like to show my students such a resource so they could review it and maybe get ideas for things they could do themselves with not a lot of jQuery. Maybe take something from the ideas and morph it into their own thing.
  
  I know Codepen has many examples of things involving a bit but not a ton of jQuery. The problem with Codepen is that there is no way to do any sort of focused filter or search for such types of projects (which would have to filter out things such as SCSS since they are just learning basics). I'm just hoping maybe someone has put out a resource specifically about short jQuery scripts.
  
  Thanks!
  
  **Tags:** javascript
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_2 on 2023-05-03. Score: 2
  
  One possibility is a kind of tabbed layout. It can be implemented with only a few basic tools like `hide`, `show` and `toggle`. To make it fancier, you can ask your student to add animations like `fadeIn` or changing the background color.
  
  Here's a [codepen](https://codepen.io/alexlime/pen/DjYwJz) example I found.
  
  [![a tab layout](https://i.sstatic.net/KTVSt.png)](https://i.sstatic.net/KTVSt.png)
  
  
  ---
  
  ### Answer by username_3 on 2023-04-25. Score: 2
  
  I guess my first thought would be [jQuery UI](https://jqueryui.com/), which is possibly exactly what you are looking for.
  
  A secondary approach (which you should be probably doing in any case) is to make sure that you save past student projects. You can choose to make these "visible" to current students, because over time they will create their own "library" of sorts, with internet search eventually being the lookup for snippets for the behaviors the students see.
  
  > **Comments:**
  > **username_1**: But it is in in maintenance-only mode,  check here https://openjsf.org/blog/2021/10/07/jquery-maintainers-update-and-transition-jquery-ui/  So not sure if that is a good idea.  
  > **username_3**: @username_1 Interesting! Even so, I don't think that negates its value for students trying to wrap their heads around jQuery for the first time. It's still a very useful resource.  
  > **username_1**: But you may further check my answer for "that negates its value for students trying to wrap their heads around jQuery for the first time."  
  > **username_3**: @username_1 Interesting articles! I'm not enough into the webdev space to comment on whether their journey negates the value of jQuery entirely. I answered the question as asked, but you may we'll be right.  
  
  ---
  
  ### Answer by username_1 on 2023-05-16. Score: 1
  
  I would rather suggest you think twice about using jQuery. But instead of listing my reasons for not using it, you may check this github article published in **2018**, [Removing jQuery from GitHub.com frontend](https://github.blog/2018-09-06-removing-jquery-from-github-frontend/) and its updated version [How we use Web Components at GitHub](https://github.blog/2021-05-04-how-we-use-web-components-at-github/)
  
  Gitlab did the same as, [Remove jQuery from GitLabs Frontend code](https://gitlab.com/groups/gitlab-org/-/epics/3417)
  
  So unless you have a specific need to jQuery (then we better discuss it, e.g [The WordPress Factor](https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/)), do not. For example, for learning purposes, I would rather suggest using vanilla modern JS to do it.
  
  > **Comments:**
  > **username_0**: Thanks for your input. It's not my decision to use jQuery. That belongs to the higher-ups. Nevertheless, I'll check out those links, and if I can put together a good argument for going away from jQuery I'll present it to the higher-ups and see if I can get buy in.  
  
  ---
  
  