"Conceal and reveal dynamic content using the power of jQuery's

Hello everyone, I'm encountering an issue with this code where I am trying to display a variable in the content. Take a look at the code below:

I am attempting to show the variable $name in the div #divToToggle upon clicking, but the variable does not seem to be working properly. Regular text displays fine, but the variable does not.

        <!DOCTYPE html>
    <html>
    <head>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function toggleAndChangeText() {
         $('#divToToggle').toggle();
         if ($('#divToToggle').css('display') == 'none') {
              $('#aTag').html('Collapsed text mode &#9658');
         }
         else {
              $('#aTag').html('Expanded text mode &#9660');
         }
    }
    </script>
    </head>
    <body>
    <?php 
       $name = 'sasdsad'; 
    ?>
    <div>
    <a id="aTag" href="javascript:toggleAndChangeText();">
       Expanded text mode &#9660;
    </a>
    <div id="divToToggle">
       <?php echo $name; ?>
    </div>

    </body>
    </html>

Answer №1

1.)Make sure to run your code on XAMPP server as it requires PHP.
2.)Remember to save the file with a .php extension.

If you are using HTML, check out this Demo

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

What is the best way to format these div elements in order to create a functional comment section?

For the past few hours, I've been struggling to figure out what’s causing issues with the styling on my webpage. The layout should display a user post on one side and a comment-section along with the comment form on the other. Within the PostComment ...

Viewing YouTube videos on an iPhone can be done through a web view

I am having some trouble playing videos in this specific format. http://www.youtube.com/embed/lNOMZoF9VlM?rel=0 Here is my HTML string. NSString *html = [NSString stringWithFormat:@"<html><head>\ <body s ...

I have been attempting to extract real estate listings from an MLS website using Beautiful Soup and have found some success. I am now considering if using Selenium would be a more efficient option

Perhaps this question has been answered before, which could help guide me in the right direction. The website loads 24 listings at a time and then displays a "see more results" button to load the next batch of 24 listings while keeping the initial 24 visib ...

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

Resize drop zone with drag and drop functionality

I am using jQuery for dragging and dropping elements, but I am facing an issue. When I resize the drop zone while starting to drag an item, it seems like the previous size of the drop zone is still being used as the space. Is there a way to fix this? ...

What could be causing the excessive vertical spacing in an HTML list on Chrome: PHP output or CSS styling?

I'm having difficulty understanding why there is a significant vertical offset (around 170px) between one <li> element and the next. This issue seems to only occur in Chrome and not in Firefox, specifically within <li> elements when PHP co ...

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

Stop Bootstrap from impacting a specific division on my webpage

Is there a way to stop Bootstrap from impacting a specific div and its nested divs in my HTML document? Since adding Bootstrap, the images inside this particular div have turned dull and acquired an undesirable blue tint. Thank you for considering my conce ...

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

Making an AJAX request to the Mediawiki API in order to fetch data from a Wikipedia page

I'm brand new to the world of AJAX, APIs, and JSON, so please bear with me. My goal is to fetch the top songs from a specific Wikipedia page. After using an AJAX call and logging the results, I noticed that I only get some text but none of the main co ...

Fixed positioning upon scrolling begins prior to reaching the uppermost point (top div)

Currently, I have implemented a feature where #filter (the white select list in my sidebar) becomes fixed when it reaches the top of the page and stays there while scrolling until it reaches the footer and is released. However, I encountered an issue wit ...

Guide for verifying the minimum and maximum values when selecting a particular product from a dropdown menu

My goal is to implement validation for the width textbox when a user selects a specific product from the dropdown menu. The validation should only allow the user to enter a value between 10 and 200. I have successfully retrieved the selected value, but I ...

The Ajax method is commonly employed by well-known websites like Facebook

I'm interested in implementing an ajax technique similar to what Facebook uses. I've been experimenting with loading partial views on request, but it doesn't quite achieve the same effect as seen on Facebook's home page. I'm lookin ...

Show all span elements in a map except for the last one

Within my ReactJS application, I have implemented a mapping function to iterate through an Object. In between each element generated from the mapping process, I am including a span containing a simple care symbol. The following code snippet demonstrates t ...

unable to get highcharts to redraw and reflow properly

I am currently working on creating a dynamic page that can display between 1-4 graphs. These graphs need to be able to resize when added or removed from the page. However, I have encountered a major issue with resizing the graphs after resizing the contain ...

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

Utilize JavaScript or JQuery to create a dynamic pop-up window that appears seamlessly on the

Looking to create a unique feature on an HTML page? Want a clickable link that opens a "pop-up" displaying a specific image, right within the page rather than in a new tab or window? Ideally, this pop-up should be movable around the page like a separate ...

"Choose" with the icon permanently attached

I am looking to customize a select element to choose a month. I want the dropdown list to display only the name of the months (e.g., January, February). However, in the selected value box of the select element, I would like to show a FontAwesome icon repre ...

Animate a jumping figure using jQuery

Is it possible to create an animation of a person jumping from the bottom of the screen to the top, with the scroll bar following them? I have my doubts but would love to know if it can be done. If you want to see what I mean, check out this PDF: http:// ...

The JQuery JavaScript function fails to complete its execution

Question: How can I resolve the issue where my PHP file returns a large JSON string with approximately 2000 elements, each having 14 child elements? When using jQuery AJAX to fetch the JSON and populate an ID-identified table, the filling process stops mid ...