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

Attempting to transmit multiple variables

Tips for aligning words on a single line

Using The Telerik AJAX radComboBox to Retrieve the SelectedValue from a Secondary comboBox

Seems like ngAfterViewInit isn't functioning properly, could it be an error on my end

What is the process for connecting an event to the <body> element in backbone.js?

When using ngClick with a parameter, the parameter is not being successfully passed

When working with JavaScript and Node.js, it is not possible to access an object's index that is

Insert more text following the existing content

Using Jquery to toggle the visibility of divs based on radio button selections

What is the significance of a listener signaling an asynchronous response with a return of true, only to have the communication channel close before the response could be received?

Why does Drupal's Advagg display several css and js files?

The loading of the module from was hindered due to an invalid MIME type restriction

Include a class in ul > li elements upon page load in Angular4

Discover identical HTML elements

Adjusting the size of an object as the page dimensions change

Is there a way to streamline the form completion process on my website by utilizing voice commands through the user's microphone?

How about determining the map size based on Divine proportions?

Are you experiencing a strange problem with the CSS button when hovering, clicking, or with the border?

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

Parse a string in the format of "1-10" to extract the numbers and generate an array containing the sequence of numbers within the range