https://github.com/kcarlile/jquery-meta-tag-content-display-example
Example of how to use jQuery/JavaScript and meta tags to hide/show content on a page.
https://github.com/kcarlile/jquery-meta-tag-content-display-example
Last synced: 2 months ago
JSON representation
Example of how to use jQuery/JavaScript and meta tags to hide/show content on a page.
- Host: GitHub
- URL: https://github.com/kcarlile/jquery-meta-tag-content-display-example
- Owner: KCarlile
- License: gpl-3.0
- Created: 2022-10-28T06:30:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-04T17:12:56.000Z (about 2 years ago)
- Last Synced: 2025-02-07T23:26:14.456Z (4 months ago)
- Language: HTML
- Size: 21.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jQuery Meta Tag Example
## Table Of Contents
1. [Overview](#overview)
1. [File Index](#file-index)
1. [Try It Yourself](#try-it-yourself)
1. [How Does It Work?](#how-does-it-work)
1. [Page Execution](#page-execution)
1. [HTML](#html)
1. [jQuery/JavaScript](#jqueryjavascript)
1. [Copying/Pasting Into Your Code](#copyingpasting-into-your-code)
1. [Adapting For Your Code](#adapting-for-your-code)
1. [Different Markup](#different-markup)
1. [Changing The jQuery/JavaScript](#changing-the-jqueryjavascript)
1. [Finding The New Meta Tags](#finding-the-new-meta-tags)
1. [Targeting The New Elements](#targeting-the-new-elements)
1. [More Specific Targeting](#more-specific-targeting)
1. [Dynamic Selector Version](#dynamic-selector-version)
## Overview
This code example demonstrates a technique to use jQuery to show persona icons (or any content) based on the presence of meta tags. For example, let's say you want to display persona icons on a page to illustrated the target audience. You can have a set of icons on the page that are hidden and then enable display of certain persona icons by adding a meta tag to trigger display of that persona icon.
### Concept
The code provided here is presented as a generic, platform-independent example. If you want to apply this concept to a specific platform, you may wish to simplify the code, but some of this code may be useful for reference. The overall concept being used here is as follows:
1. When the page loads, all possible persona icons are present, but hidden from display.
1. Look for the meta tag(s) containing the associated persona values for the page.
1. For each persona value, show the hidden role icon associated with that persona value.
Or, for a more technical summary:
- An HTML page exists with some meta tags that define some variables for the page. In this case, those meta tags define the personas/roles that apply to the content on this page.
- The meta tag can be a singular tag:
```html
```
- Or, the meta tag can be multiple meta tags with the same name and one value per tag:
```html
```
However, the code in this example assumes multiple meta tags.
- On the HTML page, there are _N_ role icons where _N_ is equal to the max number of personas and the role icons have CSS (inline or global) that sets `display: none;`. The role icon items must also have an ID that matches one of the personas and a class that matches the meta tag name. (Technically, these don't actually need to be identical, but you have to do some mapping if they aren't the same.)
- If you wrap your role icons in `
`s or any other markup, you may want to put the `display: none;` styling on the wrapper rather than the `![]()
` itself.
- Example:
```html
```
- Add some JavaScript that does the following:
- Once the page has been fully loaded, get the personas for the page:
- A) For multiple meta tags each with a singular value, loop over the meta tags where `name = "persona"` and capture each role.
- B) For one meta tag with multiple values, find the meta tag with `name = "personas"` and split the values by `,` to capture each role.
- Loop over the personas and role icons (by `class="personas"`) to set the role icons to visible where there is a match (`style="display: block;"`, `style="display: inline;"`, or remove the `display` property completely from the element).
### File Index
| File | Description |
|------|-------------|
|[index.html](index.html)|Simple example with the least amount of code.|
|[index-code.html](index-code.html)|Simple example with code displayed on the page for reference.|
|[index-dynamic-selector.html](index-dynamic-selector.html)|Example with parameterized options for more flexible usage.|
|[metatags.html](metatags.html)|Example of looping over meta tags and displaying them and their attributes.|
|[README.md](README.md)|This file.|
## Try It Yourself
If you download any of the `*.html` files, you can open them in a browser to test the functionality. However, your computer must be connected to the internet as the jQuery libraries are loaded via CDN. (PrismJS libraries are also loaded via CDN in the `index-code.html` example.)
## How Does It Work?
There are multiple elements that make this functionality work.
- A jQuery CDN include is added below the page content, but before the `