Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of the filter paragraphs should display only its corresponding review div. I want to create filter buttons for different reviews with cleaner code.

Here's the current code:


var allcont = document.getElementById("allcont");
var poscont = document.getElementById("poscont");
var negcont = document.getElementById("negcont");
var all = document.getElementById("all");
var positive = document.getElementById("positive");
var negative = document.getElementById("negative");

all.onclick = function(){
    allcont.style.display = "block";
    poscont.style.display = "none";
    negcont.style.display = "none";
    all.style.color = "red";
    positive.style.color = "white";
    negative.style.color = "white";
}

positive.onclick = function(){
    poscont.style.display = "block";
    allcont.style.display = "none";
    negcont.style.display = "none";
    positive.style.color = "red";
    all.style.color = "white";
    negative.style.color = "white";  
}

negative.onclick = function(){
    negcont.style.display = "block";
    poscont.style.display = "none";
    allcont.style.display = "none";
    negative.style.color = "red";
    all.style.color = "white";
    positive.style.color = "white";
}

When a filter paragraph is clicked, it changes color to red (as outlined in the code).

The existing code works but feels overly complex. I believe we can achieve this functionality more efficiently using a loop or similar method. Looking forward to your suggestions!

javascripthtmlcss

Answer №1

Although I typically avoid recommending jQuery, using it can simplify the process.

$(function(){
  $(".pfilter").on("click", function(){
    var $this = $(this);
    $(".cont").hide();
    $("#"+$this.data("show")).show();
    $(".pfilter").css("color", "blue");
    $this.css("color", "red");
  });
});
p {
  cursor: pointer;
  display: inline-block;
  margin: 0 10px;
  color: blue;
}

div.cont {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="all" data-show="allcont" class="pfilter">ALL</p>
<p id="positive" data-show="poscont" class="pfilter">POSITIVE</p>
<p id="negative" data-show="negcont" class="pfilter">NEGATIVE</p>
<hr>
<div id="allcont" class="cont">ALLCONT DIV</div>
<div id="poscont" class="cont">POSTCONT DIV</div>
<div id="negcont" class="cont">NEGCONT DIV</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

Does anyone know of a JavaScript function that works similarly to clientX and clientY but for tooltips when the mouse moves?

When using plain JavaScript to create a function that moves a tooltip on mouse move, the function works the first time with clientX and clientY, but fails to work when repeated. What could be causing this issue with clientX and clientY? Any suggestions on ...

javascripthtmlcss

Error: There was a syntax issue when trying to parse JSON due to an unexpected identifier "object" in the anonymous function

I'm having trouble understanding why there was an issue parsing this file: { "t": -9.30, "p": 728.11, "h": 87.10 } This is the javascript code I used: <script type="text/javascript"> function verify() { $.get("http://....file.json", funct ...

javascriptjqueryjson

Ways to showcase numerous products within a single category label

views.py : def get_meals(request): template = loader.get_template('café/meals.html') meal_data = MealInfo.objects.all() category_data = MealsCategory.objects.all() context = { 'meals': meal_data, ' ...

pythonhtmldjangosqlite

Tips on configuring HTTP headers for numerous messages within Node-RED?

I've been working on a flow that involves breaking down a large message into smaller messages. I've successfully implemented the logic for splitting the message, but when attempting to send these small messages to an http response node, I encount ...

javascriptnode.jshttpnode-red

Is receiving an error message about a "stray start tag footer" in your HTML validator?

I am perplexed by the error message I am receiving: Stray start tag footer. All I have included here is the tags: <!doctype html> <head> <title>title</title> <meta charset="UTF-8"> <meta name="keywords" cont ...

htmlcssvalidation

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

Scraping a few URLs with Javascript for Web Data Extraction

I'm struggling to retrieve data from multiple URLs and write it to a CSV file. The problem I'm facing is that the fetched data is not complete (I expect 10 items) and it's not in the correct order. Instead of getting 1, 2, 3 sequentially, I ...

javascriptweb-scrapingrequestcheerio

Passing the output of a function as an argument to another function within the same HTTP post request

I have a situation where I am working with two subparts in my app.post. The first part involves returning a string called customToken which I need to pass as a parameter into the second part of the process. I'm struggling with identifying where I m ...

javascriptnode.jsexpress

Steps for creating a TypeScript project for exporting purposes

Forgive me for my lack of experience in the js ecosystem. Transitioning from static languages to typescript has been a positive change, though I still find myself struggling to grasp the packaging/module system, especially when coupled with typescript defi ...

javascriptnode.jstypescriptnpm

Tips for ensuring a NodeJS/connect middleware runs after response.end() has been called?

I'm trying to create a setup like this: var c = require('connect'); var app = c(); app.use("/api", function(req, res, next){ console.log("request filter 1"); next(); }); app.use("/api", function(req, res, next){ console.log("r ...

javascriptnode.jsarchitecturenode.js-connect

Troubleshooting app.use in Next.js and express.js: Understanding the issue

Currently, I am working on a project using next.js along with a custom server (express.js). In my API endpoints, I want to utilize some middlewares (such as const attachUser), but strangely I am facing issues when trying to use app.use. The code seems to ...

javascriptexpressnext.js

Guiding you to choose a specific child class by identifying its parent class in CSS and jQuery

Hey there! I'm currently working on a website that allows users to post content. I want to ensure that the site is mobile-friendly, so I need to make some adjustments with media queries. Unfortunately, I've run into an issue where media query CS ...

jquerycssclassmedia-queriesparent

Incorporating an array attribute into a current array of elements

I am currently attempting to incorporate the days of the week into an existing array of objects. To give you a visual representation, check out this image: https://i.stack.imgur.com/0jCBF.png After filtering my array to only yield 7 results, I aim to assi ...

javascriptarraysreactjsapijavascript-objects

Having trouble retrieving data in Angular from the TypeScript file

demo.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-demo', templateUrl: './demo.component.html', styleUrls: ['./demo.component.css'] }) ...

javascriptangulartypescript

GATSBY: Error: Unable to find the specified property 'includes' within an undefined value

I'm struggling to figure out how to properly filter images in my portfolio website as discussed in this post… Every time I attempt it, I encounter the following error: "TypeError: Cannot read property 'includes' of undefined" D ...

javascriptnode.jsreactjsgatsby

Exploring the PayPal Checkout JavaScript SDK's CreateOrder call and interpreting the response

I am currently exploring how to use the JavaScript SDK to display PayPal payment buttons on a website. I am new to working with JSON and REST API calls, so I am facing some challenges in implementing this. The createOrder function is running smoothly and ...

javascriptjsonpaypalpaypal-rest-sdk

Update the link to a KML file used by Google Maps when a button is clicked

On the initial page load, I want to showcase an 8 Day Average KML file on Google Maps. However, users should have the option to click on the "1 Day" and "3 Day" buttons to switch the reference in Google Maps from the "8 Day" file. The aim is to design a s ...

javascriptgoogle-maps

Arrange elements side by side within siblings, while keeping the HTML structure intact

As evident from the code snippet, there are 2 dynamically generated flex divs (although there could be more). Is there a method to horizontally align items on larger screens without altering the HTML structure? I am seeking something similar to: https:/ ...

htmlcss

Creating an HTML tag from Angular using TypeScript

Looking at the Angular TypeScript code below, I am trying to reference the divisions mentioned in the HTML code posted below using document.getElementById. However, the log statement results in null. Could you please advise on the correct way to reference ...

htmlangulartypescript

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

htmlcss