A lightweight vanilla JavaScript app for expanding and collapsing blocks of text.

Overview

Read more button

A lightweight vanilla javascript read more button for expanding and collapsing blocks of text.

demo

Features

  • Choose how many text to keep and collapse the rest to create a teaser.
  • Can be used in more than one article block.

Use

Download the latest version of read-more-btn-v1.x.js file

include it in your HTML page:

<script src="scripts/read-more-btn-v1.x.js"></script>

include another script tag and call its function

Syntax:

mkBtn[Tag name][,<# of words: number>]) Where tag name is the article element and the number of of words is the number of visible text words.

<script>
mkBtn('article',20)
</script>

Thats it.

To do

  • Fix page rendering when clicking on a button
  • Add support for multiple articles.
  • Add support for class and id and other tags

License

This app is under MIT license

You might also like...

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian Plugin - Text Expander JS (open beta) This Obsidian plugin allows the user to type text shortcuts that are replaced by (or "expanded into") j

Dec 27, 2022

MySQL meets Jupyter notebooks. Grasp provides a new way to learn and write SQL, by providing a coding-notebook style with runnable blocks, markdown documentation, and shareable notebooks. ✨

MySQL meets Jupyter notebooks. Grasp provides a new way to learn and write SQL, by providing a coding-notebook style with runnable blocks, markdown documentation, and shareable notebooks. ✨

A New Way to Write & Learn SQL Report Bug · Request Feature Table of Contents About The Project Built With Getting Started Prerequisites Installation

Sep 1, 2022

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

Dec 30, 2022

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Jul 19, 2022

Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Dec 26, 2022

Generates documentations for pug.js mixins and blocks.

pug-doc-generator Generates documentation files for pug.js mixins, blocks and more. How to use All mixins with comments starting with the @pugdoc mark

Apr 21, 2022

Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

Dec 26, 2022

Get the latest Flashbots blocks and Flashbots transactions using TypeScript in two lines of code !

mev-blocks-js This package can let you query the Flashbots blocks API easily from any JavaScript or TypeScript project. You can access the Flashbots b

May 14, 2022
Releases(v1.2)
Owner
tyah
tyah
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A web component for progressively-enhanced auto-expanding textareas

Elastic Textarea A web component for progressively-enhanced auto-expanding textareas. This web component progressively enhances the native textarea: a

Cloud Four 29 Jan 9, 2023
TSServer plugin & Utilities for "expanding" TypeScript types

ts-expand-type This repo provides a TS Server plugin which amends quick info to include the fully "expanded" type. "Expanded" means that object inters

Max Stoumen 6 Nov 20, 2022
A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Keshav Bajaj 2 Sep 13, 2022
Text annotation solution for websites. TypeScript and vanilla JavaScript version.

Simple Text Annotations Use this small library when you need to add annotations to your website. Features show up / hide annotation on a element click

Jacek Jarczok 1 May 9, 2021
An obsidian plugin that allows code blocks executed interactively in sandbox like jupyter notebooks. Supported language rust、kotlin、python、Javascript、TypeScript etc.

Obsidian Code Emitter This plugin allows code blocks executed interactively like jupyter notebooks. Currently, support languages: Rust Kotlin JavaScri

YiiSh 38 Dec 28, 2022
Library for controlling MESH blocks using JavaScript.

MESH.js Library for controlling MESH blocks using JavaScript. MESH official web site is here. Verified Environment Node.js (16.15.1) npm (8.11.0) Prer

MESH project 6 Nov 22, 2022
A very simple JavaScript library written in vanilla js for scrambling text.

Scrambling Text A very simple JavaScript library written in vanilla js for scrambling text. Demo Page Table of Contents Installation Examples Basic Ex

sogoagain 10 Dec 7, 2022