How to showing expanding text with javascript and css


Tags: javascript,jquery,html,css,expand

Problem :

i need to make my text expand if i click on "more" and if i click on another "more"class i want to make it so my text retracts from all the other. so basically that there only is one "more"class is expanded. also i wanted to make the text change from more to less if the text div is open.

This is my html code

<div class="content_horses" id="page">
    <div class="accordeon" class="een">
        <div class="sientje">
            <img class="photo" src="images/horses/siente.png" alt="sientje"></img>
            <div class="name">
                SIENTJE
            </div>
            <div class="expand">
                <div class="more">MORE</div>
            </div>
            <div class="text">
                <div class="sientje_t">

                </div>
            </div>
        </div>  
    </div>
    <div class="accordeon" class="twee">
        <div class="sientje">
            <img class="photo" src="images/horses/siente.png" alt="sientje"></img>
            <div class="name">
                SIENTJE
            </div>
            <div class="expand">
                <div class="more">MORE</div>
            </div>
            <div class="text">
                <div class="sientje_t">

                </div>
            </div>
        </div>  
    </div>  

And this is my script

$(document).ready(function() {
    $(".text").hide();
    $(".expand").click(function() {
        $(this).next(".text").slideToggle(500);
        $(this).text($(this).text() == 'LESS' ? 'MORE' : 'LESS').toggleClass('up');
    });
    $(".expand").click(function() {
       $(".text").slideUp(500);
        if ($(this).next(".text").is(":visible")) {
            $(this).next(".text").slideUp(500);
        } else {
            $(this).next(".text").slideToggle(500);
        }
    });
});

I hope you will help me



Solution :

Change your script as this.

$(document).ready(function() {
  $(".text").hide();  
  $(".expand").click(function() {
    $(".text").slideUp(500);
    $(".expand").text('MORE');

    if ($(this).next(".text").is(":visible")) {
      $(this).next(".text").slideUp(500);
    } else {
      $(this).next(".text").slideToggle(500);
      $(this).text('LESS');
    }
  });
});

https://jsfiddle.net/drh8snj5/


    CSS Howto..

    How can I get a block to print complicated divs horizontally?

    Duplicated footer html/css on another page, but shows up differently?

    How to align navbar to center with css

    How to pass to next line that cutted elements in a list?

    How to temporarily modify the CSS of an element

    how to color share price changes: using css() method on dynamically created elements?

    How to use random array output as a for-loop CSS attribute in jQuery

    How to not make text colored within a href link but the text is also within div?

    How to keep css id to the 'li' in css

    CSS: how to add a style to everything, unless it is defined

    How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?

    How to Target Twitter Bootstrap <768px and 480px Breakpoints

    How to change CSS of last tab in Bootstrap Tab

    How to change different language to different font-size at same line without unique each container?

    How to center a banner and keep margin?

    How to format text wrapped inside specific symbols within a html structure and format it

    jquery hide and show for printing

    How to crop Google GeoChart and center its content?

    Can't figure out how to set color for specific div's in the loop

    CSS: When I add a button to my container, my layout breaks, how to avoid this?

    How do I replicate this website in terms of responsiveness using only css?

    How to set -fx-max-width to USE_PREF_SIZE in JavaFX css?

    How to keep div same height at all times

    How to target iPhone 3GS AND iPhone 4 in one media query?

    How to get CSS in Javascript working correctly

    how to select one element in jQuery

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

    How to get my app to fill the full height on mobile?

    Sidebar, Navigation and Content how to do it?

    How to select the first paragraph in a div with a specific class (CSS 2)