Toggle the visibility of DIV content based on the current URL

In my HTML page, I have a div-reportControlPanel as shown below. Additionally, I have included another div-reportControlPanel1 with a different ID.

<div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>

<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
 </div>

I am able to show/hide the div's based on the URL that is triggered.

    if(prptName == "css.prpt")
{
alert("if");
document.getElementById("reportControlPanel").style.display = 'none';
document.getElementById("reportControlPanel1").style.display = 'block';
}

However, since I am using the same sub-Div-promptPanel under two different div, my content is not loading properly. The promptPanel is part of the pentaho system used div. I am attempting to create another div to modify some CSS for my prpt.

Thank you.

javascripthtmlcsspentaho

Answer №1

Just to reiterate what Moishe has already mentioned: the id attribute should always be unique. Currently, you have two elements with the same promptPanel id, which means that the second one may never be accessed or called. One simple solution could involve using a hash URL along with some basic CSS if you are not familiar with JavaScript.

$(document).ready(function() {
  $('a').click(function() {
    $('#url').html($(this).prop('href'));
  });
});
div.pentaho-rounded-panel-bottom-lr {
  display: none;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
  display: block;
}
:target {
  display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"></div>
<a href="#reportControlPanel1">"Open" panel 1</a>
<a href="#reportControlPanel2">"Open" panel 2</a>
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
    this is some text in the first control panel.
  </div>
</div>

<div id="reportControlPanel2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
  <div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
    this is some text in the second control panel
  </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

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

javascriptjquerycsshtml

Eliminate the chosen and marked items from a list - Angular 2+/ Ionic 2

Currently, I have a checkbox list on my page. Whenever a user selects the "Save" button, the checked items should be removed from the list and moved to the saved tab that is also displayed. While I have successfully implemented the functionality for removi ...

javascriptangulartypescriptionic2

Are there any missing (or "optional") expressions in handlebars.js?

Currently, I am developing a build script using Node.js. To summarize, the script carries out the following tasks: Prompting the user for essential information such as the project name and description Cloning a template from a Git repository Renaming fil ...

javascriptnode.jshandlebars.js

Guide on importing a custom CSS file from Syncfusion Theme Studio into an Angular project

Is there a way to incorporate custom scss files downloaded from Syncfusion Theme Studio into Angular CLI without adding the URL to the styles section in angular.json? Can we directly import it into styles.scss instead? I attempted to do so by including th ...

cssangularej2-syncfusion

Encountering a Cypress testing issue linked to webpack. Feeling unsure about the next steps to address it

https://i.sstatic.net/z6bmW.png I encountered an error while attempting to run a test file that I created. The default tests run smoothly, but the error only occurs with the file I created. import {cypress as cy} from "cypress" describe('T ...

javascriptnpmcypress

What can be done to avoid a form being reset when it returns no results?

I've recently created a mysql and php search page, which is working well. However, I noticed that when the form is submitted and there are no results returned, the <option> tags get reset. Is there a way to prevent this from happening? META: I ...

phphtmlmysqlselecthtml-select

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

I've implemented this lengthy jQuery script to enable dynamic dropdown loading and updating when selections are changed. However, I'm facing issues in Internet Explorer where the script loads the dropdowns initially but doesn't trigger oncha ...

javascriptjqueryhtml

Running the gulp uncss command with regex to ignore specific elements is not functioning as expected

I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...

javascriptcssgulpuncss

Tips on assigning a default value to an HTML <select> tag using information fetched from a database

I am currently working on setting the default value of a dropdown element in HTML using data retrieved from an SQL database. I have successfully extracted the values from the database and stored them in variables. Here is the code snippet of what I have ac ...

phphtmlselect

Change in navigation bar appearance on scroll down

I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...

css

Looking for assistance with increasing the output size in JavaScript

As a beginner in JavaScript, I managed to create a form with a textarea and a button to display the text from the textarea in a div tag. Additionally, I added two buttons that are meant to increase the size of the text in the div tag when clicked, as wel ...

javascripthtml

Modify data in JSON using ngModel and then send it via HTTP POST request

Greetings, I am relatively new to Angular and find myself in a bit of a quandary. It seems like the solution to my issue might be simpler than I think. My Angular App consists of a basic "Page View/Controller" and an "Admin View/Controller" that both util ...

javascriptangularjsjsonangular-ngmodel

The Droppable feature in jQuery/jQueryUI molds itself to match the shape of the Dragged

In my current setup, I am working with a single column table where each cell is a droppable element that only accepts draggables of a specific class. While the borders of the table are visible, I am not a fan of the fixed size and colored cells within, a ...

jqueryhtmlcssjquery-ui

Selection highlighting in a drop-down menu

My dropdown list includes the following items: <asp:DropDownList ID="ddlsendmail" runat="server" Width="250px" AutoPostBack="true" OnSelectedIndexChanged="ddlsendmail_SelectedIndexChanged" onchange="test();"> <asp:ListItem>--select--&l ...

javascriptc#jquery

leveraging AJAX to showcase information retrieved from a MySQL database

Hello! I am brand new to PHP and have little knowledge of AJAX. I am in the process of creating a photo gallery site and have used the following code to display my photos. I would like to make it possible, using AJAX or any other language, for someone to c ...

phpjavascriptajaxjquery

AngularJS's $http.get function has the ability to read text files, but it struggles with reading JSON

I'm new to angularjs and I am struggling to retrieve data from a json file using the $http.get method. It seems to work fine when I try to read a simple txt file, but not with the json file. I can't seem to pinpoint where the issue lies... Belo ...

javascriptjsonangularjsvisual-studio

What is the best method to incorporate Font Awesome icons into select options?

Is there a way to incorporate fontawesome icons into the user status indicators, such as active or inactive? I've been attempting it with the following code: <td> <select class="statusSelect" data id="{{$user->id}}&q ...

htmlcsslaravelbootstrap-4

Tips on customizing a row in a table

Having a small issue styling a row in my table. Essentially, the table consists of 4 rows. a) If the data under column Title 5 is below 0, then the entire row should display in red color. b) If the data under column Title 5 is equal to 17, then the compl ...

cssangulartypescriptprimengprimeng-datatable

Locating or modifying items within the same row of a table using a specific column value or values

After struggling with this issue for quite some time, I finally found a solution that may benefit others. The issue at hand was as follows: I needed to locate a row by matching one or more specific cell values Then modify the value of one or more cells ...

htmlseleniumxpathselenium-webdriver

Transform the retrieved binary data into an object and then send it back

I have been working on a React function that fetches a .csv file stored in S3. The function reads the blob within the file, converts it to an object, and then returns it: import { Storage } from "aws-amplify"; import Papa from "papaparse&quo ...

javascriptreactjsecmascript-6