What is the best way to organize blog posts by using hashtags?

I am looking to implement a filtering system for blog posts using hashtags.

This feature should display only the blog posts with matching hashtags and move them to the top of the page. Additionally, there should be a button at the top to show all posts.

I attempted to use a tutorial from W3Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter), but it seems to be causing interference with the layout of the blog posts due to the use of display:none and display:block classes.

Below is an example structure of an individual blog post:

<div><!--Hide/Show based on hashtag-->
    <div> <!--Blog Post-->
        <div> <!--Blog Content also Hide/show-->
            <div>
                <!--blog content 1-->
            </div>
            <div>
                <!--blog content 2-->
            </div>
            <div>
                <!--blog content 3-->
            </div>
            <div><!--blog pagination--></div>
            <div><!--#Hashtag id--></div>
        </div>
    </div>
</div>
javascriptjqueryhtmlcss

Answer №1

For those facing a similar situation, here is the workaround:

JavaScript Solution

$(document).ready(function () {
    $(".filter-id-1").click(function () {
        $(".id-2, .id-3").fadeOut(200);
        $(".id-1").fadeIn(200);
    });
    $(".filter-id-2").click(function () {
        $(".id-1, .id-3").fadeOut(200);
        $(".id-2").fadeIn(200);
    });
    $(".filter-id-3").click(function () {
        $(".id-1, .id-2").fadeOut(200);
        $(".id-3").fadeIn(200);
    });
    $(".filter-all").click(function () {
        $(".id-1, .id-2, .id-3").fadeIn(200);
    });
});

HTML Code

<a href="#" class="filter-all">All</a> <!--Button to filter all-->

<div class="id-1 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-1 id-1 all">Hashtag #id 1</a>
</div>

<div class="id-2 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-2 id-2 all">Hashtag #id 2</a>
</div>

<div class="id-3 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-3 id-3 all">Hashtag #id 3</a>
</div>

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

Display the current page as it appears in AngularJS

I attempted to utilize the ngPrint directive from https://github.com/gilf/ngPrint for printing purposes. However, when I print the page, the design collapses entirely. Is there a solution to maintain the page layout when printing? Please note that Angula ...

javascriptangularjsangular-material

How does Label work in ChartJS?

Hello there! I am currently in the process of developing a project that involves utilizing an API. This API has data with various dates included. My goal is to create a function within the labels that includes all the necessary dates for the API. Can you ...

javascriptjquerychartschart.js

Tips for Managing Errors During Zip File Extraction in Node.js

Currently, my task involves uploading a zip file, extracting it on the server side, and handling any errors that may occur during the extraction process. I am attempting to achieve this using the following code: var zip = new AdmZip(x); zip.extractAllTo( ...

javascriptnode.jsmongodbfs

Using AngularJS to fetch Google OAuth2 tokens

Every time I initiate this call, it triggers the account selector to open. Following which I can choose one of my Google accounts, but upon selection, an error occurs. Error: invalid_request Missing required parameter: scope The URL in the account selec ...

javascriptangularjsoauth-2.0

Send the JSON data retrieved from fetch() to the .map function within a constant variable

Currently, my code is fetching JSON data from a file, but I am attempting to change it to retrieve data from an API instead. I have managed to successfully log the array from the API to the console. However, when I try to use the .map function on the fetch ...

javascriptjsonreactjsmdbreact

How can I adapt a JavaScript bookmark to work with Greasemonkey?

Trying to utilize the following bookmark as a Greasemonkey script to address an accessibility issue with stackexchange sites. javascript:(function(){$('a,%20.vote-up-off,%20.vote-down-off,%20.star-off').attr({role:'link',tabindex:&apos ...

javascriptgreasemonkeybookmarklet

Arrangement of box and buttons on R shiny interface

My dashboard page features action buttons aligned to the left, along with a plot and two additional zoom and reset buttons. I am looking to center the box on the screen and position the zoom and reset buttons at the top right corner. I attempted to use t ...

htmlcssrshinyshinydashboard

Failure of default option to appear in dropdown menu in Angular

I currently have a dropdown list in my HTML setup like this: <select id="universitySel" ng-model="universityValue" ng-options="university._id for university in universities"> <option value="-1">Choose university</option> ...

javascriptjqueryhtmlangularjs

Is it possible to decrement the index of an array by 1 and seamlessly loop back to the end in just one line of code?

Imagine I am manually adjusting the index of an array in JavaScript. I have functions to increase and decrease the index, with the goal of looping back to the beginning or end of the array when reaching the limits. While the increase function can be writte ...

javascriptarrays

How can I create a line-image-line in CSS that is less than 100% wide and remains responsive?

How can I create a similar design using HTML/CSS? https://i.sstatic.net/o5xzn.png Solution requirements: An icon or small image in the center. Responsive design that works with current breakpoints. The line should not span 100% width of the screen. I ...

htmlcssfrontend

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

jqueryhtmlxmlajaxjson

Performing a Node.js PUT call with specified parameters

Attempting to send a PUT request using the 'request' function to the following URL: request({ uri: 'http://apiurl.url/1.0/data?token=' + APItoken, method: 'PUT', data: [{ ...

javascriptjquerynode.jspostrequest

Passing the value selected from a datepicker to PHP without refreshing the page through the use of XMLHttpRequest: Guide

Is it possible to transfer the datepicker value to PHP without reloading the HTML page by using XMLHttpRequest()? The intention is to utilize this date value for a subsequent query and present it on the same HTML page. <input type="date" id="month" o ...

javascriptphphtmlajax

Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly ...

javascripthtmlcss

Tips for concealing an alert using an 'if' statement

There is an alert that pops up on a website only on specific days of the year. My query is: How can I make the alert hidden if the date is not one of those special days? I attempted the code below, but it seems to just delay the alert based on certain con ...

javascriptjquery

Trouble Keeping the Bootstrap Navbar Sticky Throughout Different Sections

<!DOCTYPE html> <html lang="en"> <head> <!-- Head section --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jessica Kowalski</title> ...

htmlcssbootstrap-5

Executing a function within a PHP script and transferring variables from JavaScript

I am currently working with a file called file.php which contains a function. On the Javascript side, I am using Ajax. $.ajax({ type: "POST", url: "file.php", data: {param1: params1, param2: params2...}, complete: function(data){ /* code */ } ...

javascriptphpjqueryajax

Is there a way to organize divs to match the layout shown in the picture?

Can someone show me how to achieve this design? https://i.sstatic.net/xbrJC.png I'm currently using bootstrap 4 and my current layout looks like this https://i.sstatic.net/o78ZN.png This is the code I have so far: <div class="col-2 row align-ite ...

cssbootstrap-4

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

htmlcssmobile

What steps can I take to resolve the warning about serving images with low resolution in Lighthouse while using Next.js?

I successfully incorporated the svg logo into my webpage using the Next.js Image tag. import Image from "next/Image" export default function Home() { return ( <div> <Image width={32} height={32} src="/logo.svg"> ...

htmlcssreactjsnext.jslighthouse