Conceal a div element dynamically when clicking on another div

<script type="text/javascript">
    function displayBookInfo(str) {
        if (str == "") {
            document.getElementById("more-info").innerHTML="";
            return;
        } 

        if (window.XMLHttpRequest) {
            // code for modern browsers
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for older versions of Internet Explorer
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("more-info").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","showbook.php?id="+str,true);
        xmlhttp.send();
    }
</script>

<div class="bookProp" id="one" onClick="displayBookInfo(this.id)">
    <div class="booknoHolder" id="in">&nbsp;01&nbsp;</div>
</div>

<div class="bookProp" id="two" onClick="displayBookInfo(this.id)">
    <div class="booknoHolder" id="in">&nbsp;02&nbsp;</div>
</div>

<div class="bookProp" id="three" onClick="displayBookInfo(this.id)">
    <div class="booknoHolder" id="in">&nbsp;03& </div>
</div>

The function runs smoothly, loading book information to the element with the id more-info as intended. However, I am facing an issue where I also want to hide or remove the booknoHolder class when I click on the bookProp element. I attempted to use jQuery to achieve this but haven't had any success so far. It's worth mentioning that the bookProp elements are dynamically generated through a PHP while loop, resulting in a dynamic number of entries.

javascriptajax

Answer №1

It seems that you mentioned using jQuery in your code, but I am unable to locate any jQuery implementation. However, if you wish to hide specific elements using jQuery, you can achieve this by executing the following:

$('.booknoHolder').hide();

To hide the elements with the class booknoHolder when a bookProp is clicked, you can utilize the following script:

$(function() {
    $('body').on('click', '.bookProp', function() {
        $(this).find('.booknoHolder').hide();
    });
});

For additional details, you may refer to the jQuery documentation provided here: http://api.jquery.com/on/

Answer №2

If you're looking for a jQuery solution, consider implementing the following:

<script type="text/javascript">
    function retrieveBookDetails(str) {
        // Retrieve HTML content using AJAX
        $.get('displaybook.php?id=' + str, function(html) {
            $("#extra-details").html(html);
        });

        // Targeting .bookFeature assumed to be inserted within #extra-details
        $('#extra-details').on('click', '.bookFeature', function() {
            $('.bookNumberContainer', $(this)).hide();
        });
    }
</script>

Answer №3

def retrieveBookInfo(input) {
        if (input == "") {
            document.getElementById("more-info").innerHTML="";
            return;
        } 

        $("#" + input + " .booknoHolder").hide();
        ...

Answer №4

Can this approach be considered useful? 

xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("more-info").innerHTML=xmlhttp.responseText;
                if(str=="one") { 
                document.getElementById("one").style.display="block";
                document.getElementById("two").style.display="none";
                document.getElementById("three").style.display="none";
}
                if(str=="two") { 
 document.getElementById("one").style.display="none";
                document.getElementById("two").style.display="block";
                document.getElementById("three").style.display="none";
}
                if(str=="three") {
 document.getElementById("one").style.display="none";
                document.getElementById("two").style.display="none";
                document.getElementById("three").style.display="block";
 }
            }
        }

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

Creating a JSON file that contains a collection of discord.js statuses and then seamlessly integrating it into the primary JavaScript document

const userActivities = [ { name: "Morning Jog", type: ActivityType.Running }, { name: "Afternoon Nap", type: ActivityType.Sleeping }, { name: "Evening Game Night", type: ActivityType.Gaming }, { name: "Late Night Code ...

javascriptnode.jsdiscorddiscord.jsnode-modules

Lightbox2 is looking to reposition the caption to the right of the image

Can anyone help me understand how to move the caption, found in data-title, from underneath an image to the right of the image? I'm not very familiar with HTML/CSS, but it looks like the image is enclosed within a div called .lb-outerContainer, and t ...

javascripthtmlcsslightboxlightbox2

Using Vue JS to apply a filter to data fetched from an API

Within my code, I attempted to retrieve users with the role of Admin and only their usernames from the API JSON data. However, I encountered an issue where it did not work as expected. "response": [ { "profil ...

javascriptvue.js

How can I retrieve the value of $_POST[] immediately after a selection is made in a dropdown box

Is there a way to retrieve the $_POST value immediately after changing the select option without having to submit the form? <select name="cat_id" class="form-control" onChange="this.form.submit();" style="width:300px;"> <?php ...

javascriptphpjqueryhtmlajax

Navigating Time Constraints and Error Management in the World of Facebook Graph API

I'm currently working on a program that involves numerous fql and graph calls, but I'm facing difficulty in handling 'get' or 'post' errors. Can anyone provide guidance on how to implement retry functionality when these errors ...

javascriptfacebook-graph-apifacebook-fqlfacebook-javascript-sdk

"Encountering issues with CSRF token validation in an Angular SpringBoot application when making an Ajax POST request, resulting in an

Current Project Details The ongoing project involves developing a single-page Angular JS application using SpringBoot with a Spring Security implementation. The application, known as 'Study Planner', allows students to input their study leave on ...

javascriptangularjsajaxspring-securitycsrf

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

When working with TypeScript, I prefer to use snake_case for properties within my Interfaces or Types. To enforce this rule, I have configured the ESLint rule camelcase as follows: 'camelcase': ["error", {properties: "never"}], Even though the E ...

javascripttypescripteslinttslinttypescript-eslint

Navigating to a different intent within the DialogFlow Messenger fulfillment can be done by utilizing the 'agent.setFollowupEvent(targetIntentEventName)' method

I am currently exploring ways to initiate another DialogFlow Intent (using its event) from a webhook server built with node.js. This will occur after gathering the user's email address, verifying their registration status by sending a POST API request ...

javascriptnode.jsdialogflow-esdialogflow-es-fulfillment

Styling HTML elements with CSS to create a full width underline effect

Is there a way to make the underlines/borders full width for each line in a paragraph without adding line breaks? I'm seeking suggestions on how to achieve this. Two potential solutions I've considered are using the tag or creating an image, ...

javascripthtmlcss

Loading bar for AngularJS material framework

Is there a way to integrate https://material.angularjs.org/latest/demo/progressLinear into my website so that it shows progress when a new view is loading? I'm trying to figure out how to obtain the value of the current page being loaded. Any suggest ...

javascriptangularjs

Would you like to learn how to dynamically alter a button's color upon clicking it and revert it back to its original color upon clicking it again?

My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet: function ...

javascripthtmlcssspring-boot

Obtain a multiline match using regular expressions

Is there a way to use regex to match only multi-line strings without matching single-line strings as well? Here is the current regex I am using: Regex ('|"|`)[\s\S]*?(\1) Test string "not a match" "need to match&qu ...

javascriptregex

A comprehensive guide on organizing JavaScript files within an Angular project

In the process of building my MEAN app, I have structured my folders in the following way: https://i.sstatic.net/hR7xN.png I have included a js file in /angular/src/assets/js for jQuery functionalities. To achieve this, I utilized npm to install jQuery. ...

javascriptjqueryangular

Discovering what is impeding the rendering of a webpage

On a particular website, the server rendering happens quickly but there seems to be a delay on the client side which is causing the HTML to be rendered few seconds later. I suspect it could be due to some setTimeout function or similar; are there any tool ...

javascripthtml

Is it possible to divide a text string into distinct arrays using spaces?

One method I am familiar with for splitting a string involves using the .split() method, like so: function split(txt) { return txt.split(' '); } When executed, this function would return ['hello', 'world'] if provided wi ...

javascriptarrays

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

javascripthtmlcss

AngularJS is throwing a $injector:modulerr error and I've exhausted all possible solutions

I recently started learning Angular and I've been following the tutorial on the official AngularJS website. Here's what I've tried so far: Installed angular-route and included the script below angular.min.js Utilized ngRoute in my mod ...

javascriptangularjsnode.jsexpress

Incorporate a delay when using jQuery's mouseenter function

I'm trying to implement a tooltip that appears 5 seconds after the mouse enters. Here's the code I've been working with: $('thead').mouseenter( function() { var tooltip = $('<div id="tooltip" class="tooltip-container ...

javascriptjquerytooltipdelay

Issues occurring with PhoneGap preventing the execution of AngularJS code

I've recently delved into learning AngularJS with PhoneGap and I have a basic HTML code along with some AngularJS snippets. While everything runs smoothly in the browser, only the HTML portion seems to work when I attempt to run it on my Android phone ...

javascripthtmlangularjsphonegap-buildphonegap

performing an ajax delete operation in CodeIgniter

Hey there, I'm encountering an issue with the delete function in my Ajax setup. It seems that the data is not being deleted from the database even though I trigger the deletion. Any insights on what might be going wrong would be greatly appreciated. B ...

ajaxcodeigniter