Switching HTML text by clicking or tapping on it

Question

Switching HTML text by clicking or tapping on it

I'm currently working on a website that will showcase lengthy paragraphs containing complicated internal references to other parts of the text. For instance, an excerpt from the original content may read:

"...as discussed in paragraph (a) of section (2) of chapter one thousand and fourteen of this article about modern art."

My aim is to present this information in a more concise format, like so:

"...as discussed in Ch. 1014(2)(a) regarding modern art."

However, I want users to have the option to switch between my shortened version and the full original text by clicking or tapping on the text. Ideally, the abbreviated text would be highlighted or outlined to indicate that it can be expanded for more details.

Does anyone have suggestions on how I could implement this feature? Should it be done using HTML, CSS, jQuery, JavaScript, or another method?

(Just to clarify, I don't need an automated algorithm to generate short forms; I can manually input them as needed.)

Thank you!

javascript jquery html css

Answer 1

Answer №1

If you need to display short snippets of text, such as a single sentence, consider storing the longer version in a data attribute within a span tag. Then, utilize jQuery to swap out the text inside the span tag with the content stored in the data attribute.

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim 
    nisl, elementum sit amet tortor eu, finibus tristique libero. Quisque 
    eget varius magna. Suspendisse sodales vitae ligula eget pellentesque. 
    <span data-long-text="Aenean pharetra ut massa non volutpat">Aenean 
    123</span>. Vivamus eu viverra eros. Aliquam condimentum lacus odio, 
    sit amet vulputate sem lacinia id. Suspendisse ultrices, lectus ut 
    volutpat cursus, justo risus aliquet lectus, hendrerit interdum massa 
    arcu at ipsum.
</p>

CSS

span[data-long-text] {
    border-bottom: 1px dotted red;
    cursor: pointer;
}
// optional styling changed to long text
.long-text[data-long-text] {
    border-bottom-color: green;
}

jQuery

$('[data-long-text]').on('click', function(e) {

    var $this = $(this);
    var short = $this.text(); // text in span tag
    var long  = $this.attr('data-long-text'); // text in data- attribute

    // text values swapping places
    $this.text(long);
    $this.attr('data-long-text', short);

    // optional styling change
    $this.toggleClass('long-text');

});

jsFiddle: http://jsfiddle.net/hp383q1t/

Answer 2

If you need to display short snippets of text, such as a single sentence, consider storing the longer version in a data attribute within a span tag. Then, utilize jQuery to swap out the text inside the span tag with the content stored in the data attribute.

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce enim 
    nisl, elementum sit amet tortor eu, finibus tristique libero. Quisque 
    eget varius magna. Suspendisse sodales vitae ligula eget pellentesque. 
    <span data-long-text="Aenean pharetra ut massa non volutpat">Aenean 
    123</span>. Vivamus eu viverra eros. Aliquam condimentum lacus odio, 
    sit amet vulputate sem lacinia id. Suspendisse ultrices, lectus ut 
    volutpat cursus, justo risus aliquet lectus, hendrerit interdum massa 
    arcu at ipsum.
</p>

CSS

span[data-long-text] {
    border-bottom: 1px dotted red;
    cursor: pointer;
}
// optional styling changed to long text
.long-text[data-long-text] {
    border-bottom-color: green;
}

jQuery

$('[data-long-text]').on('click', function(e) {

    var $this = $(this);
    var short = $this.text(); // text in span tag
    var long  = $this.attr('data-long-text'); // text in data- attribute

    // text values swapping places
    $this.text(long);
    $this.attr('data-long-text', short);

    // optional styling change
    $this.toggleClass('long-text');

});

jsFiddle: http://jsfiddle.net/hp383q1t/

Answer 3

Answer №2

https://jsfiddle.net/1gLv5qyv/

Implement the following function:

$(".text-toggle").click(function(){
    $(".toggleAble").toggle();
});

This code utilizes the JQuery plugin for toggling elements.

Answer 4

https://jsfiddle.net/1gLv5qyv/

Implement the following function:

$(".text-toggle").click(function(){
    $(".toggleAble").toggle();
});

This code utilizes the JQuery plugin for toggling elements.

Answer 5

Answer №3

To hide text on a webpage, create a CSS class with the property display:none. Assign an ID to the class and then use jQuery to toggle the class on and off.

Answer 6

To hide text on a webpage, create a CSS class with the property display:none. Assign an ID to the class and then use jQuery to toggle the class on and off.

Answer 7

Answer №4

To implement this functionality, you would utilize HTML, CSS, and jQuery (JavaScript) in the following manner:

...as mentioned in section (a) of part (2) of chapter 1014 within this article focusing on contemporary art.

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>...as discussed in <a href="#" class="ref" data-att="Ch. 1014(2)(a)">section (a) of part (2) of chapter 1014</a> within this article focusing on contemporary art.</p>

Answer 8

To implement this functionality, you would utilize HTML, CSS, and jQuery (JavaScript) in the following manner:

...as mentioned in section (a) of part (2) of chapter 1014 within this article focusing on contemporary art.

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});

$('.ref').click(function (e) {
    var refData = $(this).attr('data-att');
    var refText = $(this).text();
    e.preventDefault();
    $(this).text(refData);
    $(this).attr('data-att', refText);
});

a.ref {
    background: yellow;
    color: black;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>...as discussed in <a href="#" class="ref" data-att="Ch. 1014(2)(a)">section (a) of part (2) of chapter 1014</a> within this article focusing on contemporary art.</p>

Answer 9

Answer №5

If I were not considering SEO, my approach would be to store both long and short descriptions in a data attribute. This way, you can focus on correctly defining your HTML structure.

http://example.com

HTML

<p class="has-expanded-text">
     ...as discussed in <span class="toggle short" data-short-
     description="Ch. 1014(2)(a)" data-long-description="subparagraph 
     (a) of subdivision (2) of chapter one thousand and fourteen of this 
     article"></span> concerning modern art.
</p>

CSS

.toggle { color: blue; text-decoration: underline; cursor: pointer; }

jQuery

$('p.has-expanded-text').each(function(index){
    var $span = $(this).find('.toggle'),
        $short = $span.data('short-description'),
        $long = $span.data('long-description');

    $span.text($short); // sets default text to short description

    $span.click(function(){
        if($span.hasClass('short')){
            $(this).addClass('long').removeClass('short');
            $(this).text($long);
        }
        else{
            $(this).addClass('short').removeClass('long');
            $(this).text($short);
        }
    });
});

Answer 10

If I were not considering SEO, my approach would be to store both long and short descriptions in a data attribute. This way, you can focus on correctly defining your HTML structure.

http://example.com

HTML

<p class="has-expanded-text">
     ...as discussed in <span class="toggle short" data-short-
     description="Ch. 1014(2)(a)" data-long-description="subparagraph 
     (a) of subdivision (2) of chapter one thousand and fourteen of this 
     article"></span> concerning modern art.
</p>

CSS

.toggle { color: blue; text-decoration: underline; cursor: pointer; }

jQuery

$('p.has-expanded-text').each(function(index){
    var $span = $(this).find('.toggle'),
        $short = $span.data('short-description'),
        $long = $span.data('long-description');

    $span.text($short); // sets default text to short description

    $span.click(function(){
        if($span.hasClass('short')){
            $(this).addClass('long').removeClass('short');
            $(this).text($long);
        }
        else{
            $(this).addClass('short').removeClass('long');
            $(this).text($short);
        }
    });
});

Answer 11

Answer №6

Utilizing jQuery, CSS, and vanilla JS can make this idea a reality

HTML:

<p class="first">your initial text</p>

<p class="additional">extra content</p>

CSS:

.additional { display:none; }

jQuery:

jQuery('.first').click(function(){
    jQuery(this).hide();
    jQuery('.additional').show();
});

Answer 12

Utilizing jQuery, CSS, and vanilla JS can make this idea a reality

HTML:

<p class="first">your initial text</p>

<p class="additional">extra content</p>

CSS:

.additional { display:none; }

jQuery:

jQuery('.first').click(function(){
    jQuery(this).hide();
    jQuery('.additional').show();
});

Switching HTML text by clicking or tapping on it

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Challenges faced when integrating Angular with Bootstrap elements

Manually detecting changes in the query string using AngularJS

enhancing the appearance of the initial sentence in the closing passage through CSS styling

The deep reactivity feature in Vue3 is functioning well, however, an error is being

Using jQuery or JavaScript in an ASP.NET environment, you can make the parent list item of a dropdown link active

Multiple occurrences of setting the state on an array result in logging an empty array each

What is the best way to relocate a child component to a different parent in React?

Ways to enhance focus on childNodes using Javascript

Swift code in WKWebView shows increased word spacing in lengthy Arabic texts

Issue with verifying file existence utilizing $.ajax()

Exploring the significance of a super in Object-Oriented Programming within JavaScript

Enhancing search results with data retrieved from a jSON response

Graphics distorting on android devices when implementing createjs and canvas technology

The issue arises when attempting to apply CSS styles to an existing component or body tag,

Validate an object to check for null or empty fields, including arrays, using Javascript

Iterating through a legitimate JSON object and storing each data value in a separate variable

What is the best way to mark a MenuItem as active within a Material UI Drawer component?

String includes another String not refreshing automatically

This JavaScript operates in solitude, unable to collaborate with other JavaScripts

What is the best way to organize table rows into a single column when the window is resized?