What is preventing me from accessing the hidden article using the URL with the hashname?

I've been searching for a solution, but so far nothing seems to work for me. I have a page with header and content sections. The content section is currently not visible. When I click on an item in the navigation menu, I want to hide the header and display the selected article. I managed to make it work, but when I try to access the article using the URL followed by #name, nothing happens.

Using "jsfiddle" won't help in this situation, but I will share the code there to demonstrate what I have done. Is there another way to achieve this? Perhaps hiding articles with code and adjusting opacity, or using jQuery's "addClass" function? I'm feeling a bit lost and stuck at the moment.

Thank you for any assistance you can provide.

https://jsfiddle.net/edby86ta/8/

javascriptjqueryhtmlcssjsfiddle

Answer №1

If you prefer, you could achieve the same result using only CSS: Visit this link for an example.

The challenging part in this approach is figuring out how to hide it again. One option is to create a "close" button that links to another anchor tag:

<a href="#clear">Close</a>

Answer №2

If you want to dynamically show and hide articles on your website, you can easily implement JS conditions based on the link. Check out the updated JSfiddle I have prepared for you:

https://jsfiddle.net/edby86ta/10/

$(function () {

    //GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
    $(document).ready(function(){
    var hash = window.location.hash;
      if(hash.length){
      $(hash).show();
      }
    })
    
    $(".article-nav a").on("click", function () {       
        
        $(".main-article").hide();
        
        console.log($(this).attr("id"));
         
        $('#article-' + $(this).attr("id")).show();
     });
});
article {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul class="article-nav">
      <li><a id="1" href="#article-1">Article 01</a></li>
      <li><a id="2" href="#article-2">Article 02</a></li>
    </ul>
  </nav>
</header>
<div id="content">
  <article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
  <article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>

Just a friendly tip: Always validate user input, as they have the ability to manipulate the hash value in the URL and potentially inject harmful code into your website. Be cautious and check the validity of the hash before using it.

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

How can I utilize a custom function to modify CSS properties in styled-components?

I am working with styled components and need to set the transform property based on certain conditions: If condition 1 is true, set the value to x. If condition 2 is true, set the value to y. If neither condition is true, set the value to null. Despite ...

javascriptreactjsif-statementstyled-componentsternary

Modify the state from a listener that is enclosed in the useEffect function

Within my hook called useQueryEvents, I have a setup that involves fetching all past transactions for a user and listening to the network for incoming/outgoing transactions. These transactions are then passed into a function called addActionToActivity, whi ...

javascriptreactjsreact-nativelistener

Retrieving data from a collection with the find() method in a custom date format

Schema for Customer Data Customers.js import mongoose from 'mongoose'; const Customers = mongoose.Schema({ CustomerID: { type: String, default: "" }, Name: { type: String, default: "" }, Email: { type: String, default: "" }, Pho ...

javascriptnode.jsmongodbmongoosemomentjs

Execute an xmlhttprequest and then redirect to a different URL

I'm a beginner when it comes to AJAX and JavaScript. My goal is to first show a confirmation box, then send an XMLHttpRequest if confirmed. After that, I want to redirect the user to a new page. Below is my current code: <script type="text/javascr ...

phpjavascripthtmlxmlajax

Having trouble retrieving data from MongoDB and rendering it on an HTML page

Creating a Model Named Field.js in Mongoose const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/SuperchainV1', { useNewUrlParser: true }); mongoose.set('useNewUrlParser', true); ...

javascriptnode.jsmongodbexpressmongoose

Trigger functions by clicking or bind click events by calling a function?

I need help comparing two similar code snippets: myFunc(); function myFunc() { var e = document.getElementByClassName("link"), i = e.length; while (i--) { e[i].addEventListener("click", function() { //do stuff for each ...

javascript

A guide to sorting JSON objects in Node.js

let data={ '0': { benchmark: null, hint: '', _id: '54fe44dadf0632654a000fbd', date: '2015-05-10T01:11:54.479Z' }, '1': { benchmark: null, hint: '', _id: ...

javascriptjsonnode.jsmongodb

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

javascriptcssvue.jsvuejs2vue-component

Data Filling and Consolidating in MongoDB

Recently, I inquired about a similar issue here: Mongoose/Mongodb Aggregate - group and average multiple fields I am attempting to utilize Model.aggregate() to determine the average rating of all posts based on date and then further categorized by specifi ...

javascriptmongodbmongooseaggregatepopulate

Determine the location based on the preceding parameter of $routeChangeError using AngularJS

I am currently monitoring events of the type $routeChangeError within a run block in my application. $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) { if (!!previous) { console.log(previous); $locati ...

javascriptangularjs

How do I access a specific child from an object/element retrieved by using the elementFromPoint() method in Javascript?

Is there a method to extract the child element from an element or object retrieved by the function elementFromPoint(x, y); Consider the following scenario: var elem = document.elementFromPoint(x, y); Let's assume that the element returned and saved ...

javascriptjqueryparent-child

Is there a way to stop the Facebook Connect isUserConnected function in jQuery from running multiple times?

I am facing an issue with integrating Facebook into my project. Whenever a user clicks on a link, a function is triggered to check if the user is logged in to Facebook. If they are not logged in, a data piece is set and the Facebook login process is init ...

jqueryfacebook

Tips for positioning an element at the bottom of a flexible container with variable size

How can I ensure that the Author element in this jsfiddle is aligned properly between the card elements? I am struggling to adjust the size of the details container to match the variable sizes of other elements in the same row. The aim is to have the Auth ...

cssflexbox

Show a concealed dropdown menu within a CSS grid column utilizing clip-path styling

Working on a Django admin header that makes use of CSS grid to create two columns. I have added a JavaScript dropdown effect to the user icon for displaying options like "Change Password" and "Log Out". However, encountering an issue where the dropdown rem ...

javascriptcssdjangogriddjango-admin

Guide to positioning an icon at the center of a material card

I am new to CSS and Angular Material, and I need help centering the icon on the card following the design from Figma. I tried copying the CSS from Figma, but it didn't center the icon as expected. Can someone please share techniques to achieve this? S ...

cssangularangular-material

Divide a SINGLE BACKGROUND IMAGE in HTML into two separate links of equal size, one at the top and

As a beginner in HTML, I am trying to find a way to divide a background image into two equal sections without using image mapping. I attempted to split the links by setting the style to 0% and 50% to designate the top and bottom halves, but unfortunately, ...

javascripthtmlcsshtml5-canvas

Search for a JSON key/value pair in JavaScript/jQuery by partially matching a variable and returning the corresponding value

I am currently working on a project that involves searching through a list of models to find the corresponding URL for a specific one. Sometimes I may not have the full key or value, but I will always have at least a part that is unique. At the moment, my ...

javascriptjqueryjson

My Ajax request does not seem to function properly when attempting to transfer data to a different

Take a look at the following code snippet: <div class="category" id="<?php echo $cat->term_id; ?>"><?php echo $cat->cat_name; ?> </div> $(".category").click(function(){ var categ = $(this).attr('id&apos ...

phpjqueryhtmlajax

Searching for the index of a nested array in jQuery using JSON

I am currently working on developing an image uploader using Codeigniter3 along with jQuery and Ajax. Problem: I am facing difficulty in understanding how to locate the index of the array received from the ajax response shown below. Here is the data retu ...

javascriptjqueryajaxjson

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome