"Click here for additional details" hyperlink, featured in an Email Bulletin

I need assistance with adding a "Read more..." link to my HTML newsletter that will expand and hide additional content within the email. I have been able to achieve this on a website using CSS, but it is not working in an email, particularly when viewed in Microsoft Outlook.

Here is the HTML code snippet:

<p class="read-more-wrap">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
    <span class="read-more-target">hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum hidden lorem ipsum.</span>
</p>
<label for="post-1" class="read-more-trigger"></label>

And here is the CSS code provided:

.read-more-state {
    display: none;
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
    content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
    content: 'Show less';
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
}
htmlcssoutlookhtml-emailnewsletter

Answer №1

Check out this simple solution I came up with:

CSS:

#checkbox1:checked ~ .details {
  display: block;
}

.details {
  display: none;
}

#checkbox1 {
  display: none;
}
.show-details {
  cursor: pointer;
}

HTML:

<input type="checkbox" id="checkbox1" />
<label for="checkbox1" class="show-details">Show more details</label>
<div class="details" >Additional information here</div>

Demo: https://jsfiddle.net/behxbd0t/

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

How can I enter a single backslash for location input in node.js without using double backslashes?

I have a project where the user needs to input a word to search for in files along with the folder location. However, I am struggling to write code that allows the user to input the location using single backslashes instead of double backslashes. const fol ...

javascripthtmlnode.jsjsonweb

Creating HTML tables dynamically using PHP

I am currently working on creating a dynamic HTML table by querying the database using PHP. I am facing some challenges in understanding how to combine two different loops to ensure the correct generation of the desired table. <table><tr> & ...

phpjqueryhtmlcodeigniter

Dealing with unnecessary gaps separating div elements within bootstrap and HTML code

I am in the process of developing a responsive control panel using HTML, CSS, and Bootstrap. I have successfully created a navigation header, but there seems to be too much spacing between the header and the body content. How can I reduce this space or set ...

csshtmltwitter-bootstrap

The label and its .input-group in Bootstrap 5 are not aligned on the same line

<div class="input-group mb-3"> <label class="input-group-text form-floating ">Please Share Your Name *</label> <input type="text" class="form-control" placeholder="First Name&quo ...

htmlcssbootstrap-5

Tips for stopping Razor from altering HTML strings

In order to display the body of a message, which is a piece of HTML, using Razor, follow these steps: Within your cshtml file, include the following code: <div> @message.Body </div> For example, if the content of message.Body is: <p&g ...

c#htmlasp.net-mvcrazor

Deliver JavaScript and HTML through an HTTP response using Node.js

My attempts to send both a JavaScript file and an HTML file as responses seem to be failing, as the client is not receiving either. What could be causing the client to not receive the HTML and JavaScript files? I am using Nodejs along with JavaScript and H ...

javascripthtmlnode.js

Achieve a sliding effect between two divs using CSS only

I'm trying to create a design with 2 divs that are the same size. The first one is visible by default, while the second one is hidden initially. My goal is to achieve an effect where when you hover over the first div, the second one slides upward and ...

htmlcssanimation

Efficiently Displaying Multiple HTML Elements in React Native WebView

I am currently working on developing an Epub reader in React Native and facing a challenge. I need to find a way to efficiently transfer multiple html content files from the Epub container to the webview in order to achieve seamless pagination. ...

javascripthtmliosreact-nativeepub

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

What is the method for retrieving the index of an array from an HTML element?

Howdy! Within my Vue application, I have the ability to create multiple individuals: <div v-for="newContent in temp" :key="newContent.id" @click="showId(newContent.id)" v-show="true"> <!-- ...

javascripthtmlvue.js

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

javascriptjquerycsshtml

Incorporating a new div element into a CSS layout with multiple

Could this be done? Imagine I have 15 divs, with 3 in each of the 5 columns of a multiple column CSS layout. I also have responsive code that adjusts the number of columns based on screen size. So, is there a way to insert a div between the 12th and 13th ...

javascripthtmlcssmultiple-columns

Using a series of identical divs to dynamically update the image URL

Greetings! I am a newcomer to the world of web development and I have decided to hone my skills by creating a small website for my mother! My goal is to replicate a specific div multiple times while changing only the image URL and the heading caption. < ...

javascripthtml

Troubleshooting problem with customized Bootstrap 5 form-switch functionality

Currently, I am developing a website utilizing Bootstrap 5. However, I have encountered a problem with form switches when using a customized version of Bootstrap 5.1.3 Interestingly, when I include Bootstrap 5.1.3 via CDN, the form switches display correc ...

csssasssafaribootstrap-5

Creating responsive input fields involves designing them in a way that they adjust their

Looking for help to make my input fields responsive and align the columns in the middle of the page with margins all around like shown below. Also seeking samples created with HTML, CSS, Bootstrap for reference. https://i.sstatic.net/DDR6m.png <!DOCTYP ...

htmlcssbootstrap-4

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Currently, I have a spreadsheet with a button that is supposed to link to a function in my Google Apps Script called openInputDialog. The goal is for this button to open an HTML UI where users can input text into five fields. This input should then be adde ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Items in a CSS masonry container with a 'column count' feature showcasing drop shadows that elegantly span across multiple lines

I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...

cssdatagridtwitter-bootstrap-3

Retrieve all hyperlinks from HTML using C programming

Is there a way to extract all URLs from an HTML document using the C standard library? I attempted to use sscanf() for this purpose, but encountered errors when checking with valgrind. I'm unsure if my code will meet the requirements even after succe ...

htmlcregexstring

Within a <div> element, there is a <span> element with a border and a specific line height. The

Can anyone explain why the border of the span is positioned next to the top? When I remove the display property for the span, it seems to work fine. Thank you. div { height: 80px; border: 1px solid green; line-height: 80px } .inner-span { heigh ...

htmlcss

Guide on clicking an element in selenium that has an href attribute of "javascript:void(0)" when the element is not attached to the page document

This is the web page HTML structure that caught my attention. <div class="paging"> <a href="javascript:void(0)" id="pcPaging1" class="active">1</a> <a href="javascript:void(0)" id=" ...

javascriptpythonhtmlseleniumweb-crawler