Expand and collapse button for viewing more content

I need help figuring out how to display a list of 10 items on my website. I want to show only three items initially, with a "View More" button that, when clicked, will reveal the remaining items. The button should then change to "View Less" so users can easily toggle between the two views. I'm new to web development and not sure how to implement this feature. Any assistance would be greatly appreciated. Thank you.

Here is the current code snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

Are you in search of this specific functionality?

function changeName(){
    if($("#collapseButton").html()=="View more"){
        $("#collapseButton").html("View less");
    }
    else{
        $("#collapseButton").html("View more");
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> 
    </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
      <h2>Simple Collapsible</h2>
      <p>Click on the button to toggle between showing and hiding content.</p>
      <div>
      <li>
        1
        </li>
        <li>
        2
        </li>
        <li>
        3
        </li>
      </div>
      <div id="collapsible" class="collapse">
        <li>
        4...
        </li>
        <li>
        5...
        </li>
        <li>
        6...
        </li>
        <li>
        7...
        </li>
        <li>
        8...
        </li>
        <li>
        9...
        </li>
        <li>
        10...
        </li>
      </div>
    </div>
    <div align="right">
        <button id="collapseButton" type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible" onclick="changeName()">View more</button>
    </div>

Further information can be found at https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

This code has room for improvement and can undergo various optimizations.

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

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...

javascripthtmlyoutube-apiyoutube-javascript-apivideo-player

Troubleshooting Spring JSON Response and Handling 406 HTTP Errors

I've come across numerous questions regarding this issue, but haven't been able to find a solution. Here is the method I'm using: @RequestMapping(value="/testInit") public @ResponseBody Output test() throws Exception { return new Output ...

jqueryjsonspringjackson

"Enhance your forms with Ajax for seamless uploading and convenient text

My current challenge involves submitting a form that features multiple file uploads using ajax along with text input. I'm facing an issue where if a user successfully uploads all the files using ajax but forgets to enter their name, the form resets an ...

phpjqueryajaxfileupload

The data fail to load correctly with Ajax

I'm having trouble displaying the data from each link in my div. I suspect it may be related to an external .js file that controls the slide up jquery function. Every time a link is clicked, the box slides up but doesn't show any new data. Additi ...

jqueryajaxhtmlload

Sending template reference from one Angular component to another

I have a main grid component that includes smaller grid-item components. The majority of these grid items navigate to a specific route when clicked. However, there is one particular item that should open a modal window instead of navigating. Is there a wa ...

javascriptangulartypescript

Tips for altering the value of a previously checked checkbox in jQuery

My current task involves creating a form using JavaScript. There is an option to add an address dynamically by clicking on a specific link that triggers the function addNewAddress(). The form layout includes input fields for Address Line 1 and Address Lin ...

javascriptjquery

Unfortunately unable to retrieve data with Meteo HTTP call

I've encountered a peculiar issue with meteor. I'm attempting to perform an HTTP call and utilize the retrieved data in a React component, but I'm unable to access the data returned. On the server: 'get': function get() { try ...

javascriptreactjshttpobjectmeteor

Exploring request parameters within an Express router

I'm currently facing an issue with accessing request parameters in my express router. In my server.js file, I have the following setup: app.use('/user/:id/profile', require('./routes/profile')); Within my ./routes/profile.js fil ...

javascriptexpressexpress-router

Tips for utilizing various broadcast options to trigger Angular controllers according to the user's chosen selection

I'm currently developing an angularjs application that includes multiple date range pickers on a single web page. When a user selects a date range from one of these pickers, I need to send the selected dates to the corresponding angular controller ass ...

javascriptjqueryangularjs

Tips for resolving the "Page Not Found" error in your NextJs application

I am organizing my files in the following structure src/ ├── app/ │ ├── pages/ │ │ ├── authentication/ │ │ │ ├── SignUp/ │ │ │ │ └── page.tsx │ │ │ └── SignIn/ │ ...

javascriptreactjstypescriptnext.jsfrontend

There appears to be a few bugs present in my html code

I'm uncertain about what I am missing, can someone help me out? Thank you. When I click "check," it returns wrong(); It should actually return yes(); because both have the same value and result. However, it's only giving wrong(); If the value ...

javascripthtmlajax

Adjust the alignment of text on both ends of the HTML5 canvas

Is there an easier way to align text on both sides of a canvas element besides using CSS? The link below might provide some insight: https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527 I'm considering incorporating the text into the d ...

javascriptcsshtmltwitter-bootstrapcanvas

Perl is reporting a status of 200, yet jQuery is receiving a parsererror

An issue I am facing is that the Ajax always returns "textStatus: parsererror, errorThrown: SyntaxError: Unexpected token :". However, the response actually shows as "responseText: {"success":"Search Successful","Timetable":"aaa"},". I checked on jsonlin ...

javascriptajaxjsonperl

A server that broadcasts using Javascript, Node.js, and Socket.IO

Could someone provide a simple example of how to create a Node.JS server that runs both a TCP and Socket.IO server? The main goal is to pass data from a TCP client to multiple Socket.IO clients who are interested in it. This setup is intended to facilita ...

javascriptnode.jstcpsocket.iobroadcast

Retrieve a remote text file using vanilla JavaScript instead of relying on jQuery

Currently, I am aiming to retrieve the content of a text file using JavaScript for parsing purposes. Although I previously relied on jQuery and JSONP for this task, I now prefer to achieve it without any framework. Despite numerous attempts, none have bee ...

javascriptajaxxmlhttprequest

Tips for redirecting to a 404 page when encountering invalid data in getStaticProps

For my Next.js application, I need to retrieve all articles written by a specific author. The author's ID is obtained from the request parameters. I have already pre-generated some authors using getStaticPaths. Within the getStaticPaths function, I h ...

javascriptreactjsnext.js

The event listener for 'load' is not functioning properly within the React (Gatsby) environment

I'm having trouble with a sticky scroll parallax effect when the page initially loads at a position other than the top. I'm utilizing the react-scroll-parallax library (https://www.npmjs.com/package/react-scroll-parallax). To address this issue, ...

javascriptreactjsgatsbyparallax

Utilize Bootstrap to position the button right next to the input field

I am having trouble aligning the button on the right next to the email textbox. Unfortunately, my attempts have not been successful. Fiddler: https://jsfiddle.net/Vimalan/mt30tfpv/4/ <div class="col-xs-3"> <div class="fo ...

htmlcsstwitter-bootstrap

Refresh a particular element using javascript

I'm new to Javascript and I am trying to refresh a specific element (a div) using only Javascript when that div is clicked. I came across the location.reload() function, but it reloads the entire page which doesn't fit my requirements. Upon clic ...

javascripthtmlcssreload

Iterate through TD elements to retrieve their values

Is there a way to retrieve the value of my TD for deleting dates from my database using jQuery? This is the current code snippet I have: $(document).ready(function() { $('table#delTable td a.delete').click(function() ...

jquery