An elementary glossary outline made with jQuery

I am a jQuery beginner and I need assistance creating a dictionary list.

The challenge I face is that each definition should be displayed under its own row of 3 words on desktop, 2 words on tablet, and as a single word in an accordion system on mobile. Only one definition should be visible at a time, toggling when clicked.

Wordpress will be used to add words dynamically, so the list must adjust accordingly.

Here is my incomplete test code: https://jsfiddle.net/Xroad/qbh79xoy/31/

$('.tabs .tab-link').each(function (index, item) {
   $(item).attr('data-link', index);
});

$('.tab-content .tab-content').each(function (index, item) {
   $(item).attr('data-content', index);
});

$('.tabs .tab-link').click(function () {
    $('.tabs .tab-link').not(this).removeClass('current');    
    $(this).toggleClass('current');
});

I am unsure how to display each definition under a row of 3 words. Can someone please provide guidance? Thank you in advance.

DESKTOP VERSION

https://i.sstatic.net/105oo.jpg

MOBILE VERSION

https://i.sstatic.net/Z9Qx0.jpg

javascriptjquerycss

Answer №1

Media queries are a great way to adjust CSS rules based on specific conditions like screen width.

For instance, if you want a certain width rule to only apply to screens no wider than 480px, you can use the following code:

@media screen and (max-width: 480px) {
  body {
    width: 100%;
  }
}

Similarly, if you need a width rule to only take effect for screens narrower than 769px, you can utilize this code:

@media screen and (max-width: 769px) {
  body {
    width: 33%;
  }
}

Feel free to include as many media queries as necessary for your design needs.

To learn more about media queries, check out this informative page on w3schools.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aggregate the JSON data by grouping and calculating the total value

Looking to organize a set of JSON values by grouping them based on different geographical regions. Identified,Proposal Submitted,QO under Evaluation,Negotiation & Contracting,Closed Lost,Closed Won are all grouped according to count and pipelinevalue ...

javascriptjqueryjson

Three.js experiencing issues with FBX animations running erratically

Having trouble with animations on some fbx models. When an animation lasts 20 seconds, the model remains stationary for 19 seconds and then suddenly moves within the last second or so. However, other fbx models animate correctly. The code used to run the a ...

javascriptthree.jsfbx

Dealing with Errors When Working with Angular Promises

Currently, I am in the process of mastering promises within Angular. In my code snippet, I have two "GET" requests that I need to execute sequentially. Everything is functioning properly, but I'm unsure about how to handle errors in this scenario. If ...

javascriptangularjspromise

Creating a Date Scalar in GraphQL-JS: A Step-by-Step Guide

Currently, I am in the process of defining a custom scalar within GraphQL in order to access and manipulate Dates from my MongoDB collections. Although I am still grasping the concept of what a scalar is and its purpose, it appears to be a type that I can ...

javascriptnode.jsmongodbgraphqlgraphql-js

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

javascriptcsslayoutresponsive-design

Leveraging the power of the vuejs plugin within the main.js script

My goal is to develop a plugin to manage the OAuth2 token data in my Vue.js application. I followed several tutorials available on the internet to create this plugin. var plugin = {} plugin.install = function (Vue, options) { var authStorage = { ...

javascriptpluginsvue.jsvuejs2

What is the best way to assign a value to a Vue component instance?

I am trying to send a value from my web component to the Vue instance and then use it in a Rails html.erb file. The element where I am mounting the Vue instance is shown below: <div id="app" :purchaseId="1"> However, I have b ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Showing information retrieved from a database using PHP in a sequential manner

I'm currently working on developing a webpage that features 6 rows of images, with each row containing 4 images accompanied by captions right below them. The structure I have in mind is as follows: IMAGE IMAGE IMAGE IMAGE TEXT TEXT TEXT TEXT IMAGE ...

phphtmlcss

issue involving the use of jQuery

I am currently utilizing jQuery to facilitate the upload of an image and display a live preview. Within my form, I have assigned the id prescriptionform to the form itself, scaninput1 to the file input field, and <div> with the id preview for display ...

jquery

What is the purpose of row-gap (and column-gap) in both Flexbox and Grid Layouts?

While researching browser compatibility for the gap property, I came across this informative page: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap. The page includes examples for both Flex and Grid Layouts, leading me to assume it would only work ...

htmlcssflexboxcss-grid

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

javascriptjqueryhtmlcss

Discover how to use Jest and Enzyme to test for any string as the defaultValue on an input field

As a beginner in the world of testing, I've been exploring the airbnb / jest documentation to troubleshoot an issue with a test. So far, I haven't been able to come up with a solution that actually works. The snapshot contains a defaultValue tha ...

javascriptreactjsjestjsenzyme

What are the different ways you can utilize the `Buffer` feature within Electron?

When attempting to implement gray-matter in an electron application, I encountered the error message utils.js:36 Uncaught ReferenceError: Buffer is not defined. Is there a method or workaround available to utilize Buffer within electron? ...

javascriptnode.jselectron

Is it possible to create this Mobile/Desktop design using Bootstrap (or another grid system)?

I am currently utilizing Twitter Bootstrap 3 to design a website that is optimized for mobile devices. I want two elements (#1 and #2 as shown in my sketch) to appear in a sidebar on the left side of the screen when viewed on a large display, while the mai ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Having trouble getting the Scene to appear in Three.js

I'm encountering some challenges with three.js as a beginner, specifically in rendering my scene and camera. Although I have successfully converted Adobe Illustrator vectors, I am struggling to render the scene properly. Even when removing the scene, ...

javascriptthree.js3ddata-visualization

Data table not refreshing with Ajax

Recently, I attempted to reload jQuery Datatables every 10 seconds, but encountered a recurring issue. Here is the code snippet: $(document).ready(function(){ var table1=$('.MessagingTable').DataTable({ }); setInterval( fu ...

jqueryajaxdatatables

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

javascripthtmlsubstringtruncatesubstr

What is stopping jQuery from displaying the entire parsed PHP array?

I am attempting to store my product table in an array and utilize JSON for passing it to jQuery, followed by using jQuery and HTML to display it to the user. This is the PHP code used for populating the array: $sql= "SELECT * FROM XXXXXXXXX"; $result = ...

phphtmljquery

I have not made any changes to the <div> tag with my CSS or JavaScript coding

Click here to see the problem I am facing on JSFiddle. I am trying to create a loading screen that will slide up after a few seconds using jQuery. Although I am familiar with HTML, JavaScript, and CSS, I am still new to jQuery. I have a feeling that the so ...

javascriptjqueryhtmlcss

Is it possible for jQuery to fail within an object method?

Consider this scenario: function Schedule (foo) { this.foo = foo; this.bar = function() { $.ajax({ url: '/something/', method: "GET", dataType: "JSON" }).done (function(data){ ...

javascriptjqueryajax