javascript oder jquery, Klicken Sie auf den link und erweitern Sie div

Bin ich auf der Suche js/jquery-Lösung auf dem Netz und stackoverflow für ein div hat eine Höhe festlegen (Beispiel 20px;) und nachdem der Benutzer klickt auf [mehr] öffnet es auf eine Höhe von auto oder 150px; (full content)

Beispiel:

<style>
.small  {height: 20px;}
.big    {height: auto;}
</style>


<div class="small">
    <p>Lorenter code hereem 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. 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.</p>
    <a href="#">Click to read more</a>
</div>

Danke für die Hilfe.

EDIT: Ich habe versucht diese:

In das "href": onclick="javascript:toggleContent(this, true);"

Zusammen mit diesem:

<script type='text/javascript'>
$(window).load(function(){
comment_reply = function (id){

   var e = $(id);
   e.toggle();
}
}); 
</script>

Das problem ist das div-erweitert klicken Sie auf, anstatt eine [a href] ich hoffe, das ist klar.

Sorry, aber wo sind Sie stecken geblieben???
Können Sie uns sagen, was Sie haben, trid, bis jetzt?
Ah, sorry, sollte ich das geklärt haben. Ich weiß nicht, wie es zu tun. Ich bin kein JS. Die einzige option, die Ich fand, um zu arbeiten war, klicken Sie auf die div-und erweitert es. Aber mit hyperlinks in meinem content-öffnet oder schließt das div und geht dann auf die url. Nicht eine saubere option.
Ich habe versucht diese:<script type='text/javascript'> $(window).load(function(){ comment_reply = function (id){ var e = $(id); e.toggle(); } }); </script> mit: onclick="javascript:toggleContent(this, true);"
jede Antwort, die-unten sind mit jQuery... wenn Sie nicht fügen Sie es doch zu Ihrem Projekt, müssen Sie zu : <script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>

InformationsquelleAutor James | 2013-11-22

Nur zu erweitern, DIV, benutzen Sie folgenden code:

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    $(this).closest('.wrapper').find('.small').toggleClass('small big');
});

Wo wrapper ist dazu da, damit link angezeigt wird

DEMO

AKTUALISIERTEN code

Machen es zusammenbrechen zu:

DEMO

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

Gibt es eine Möglichkeit, um wieder auf, und schließen Sie das div?
Sicher finden Sie in den aktualisierten Antworten
Fantastisch! Dank so viel. Funktionierte perfekt!

InformationsquelleAutor A. Wolff

Sowas... könnte noch optimiert werden...

$(document).ready(function(){
    $(document).on('click', '.small a', function(){
        $('.small').addClass('big');
        $('.small').removeClass('small');
    });
    $(document).on('click', '.big a', function(){
        $('.big').addClass('small');
        $('.big').removeClass('big');
    });
});

InformationsquelleAutor Oliboy50

Versuchen, diese

CSS

.text.short {
    height: 50px;
    overflow: hidden;
}
.text.full {

}
.read-more {
    cursor: pointer;
    display: inline-block;    
    font-weight: bold;
    padding: 3px;
    background-color: #06c;
    color: white;
    margin: 2px;
}

Skript

$(document).ready(function(){    
    $(".read-more").click(function(){        
        var $elem = $(this).parent().find(".text");
        if($elem.hasClass("short"))
        {
            $elem.removeClass("short").addClass("full");        
        }
        else
        {
            $elem.removeClass("full").addClass("short");        
        }       
    });
});

DEMO

InformationsquelleAutor Sridhar R

0

Versuchen, dieses JSFiddle: http://jsfiddle.net/RPBBg/

Was Sie brauchen, ist ein toggler div

<div id="toggle" onclick="$('.small').css('height','auto');">Click to read more</div>

InformationsquelleAutor Alekos Dordas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.