Collapsable div - Bild entfernen keep heading

Question

Einfache Sache wahrscheinlich, aber es scheint vor allem für meine Version habe ich keine Lösung gefunden.

Dieses einfache div zeigt ein großes Bild, eine Überschrift und einen langen Text. Ich möchte, dass, wenn Sie auf das Bild klicken, es alles auf der Website zusammenfalten/entfernen wird, damit es mehr Platz hat. ABER - die Überschrift sollte noch bleiben (wahrscheinlich in einem kleineren Format).

Ich habe versucht, es mit Javascript zu komprimieren, aber ich kann es nicht wirklich funktionieren, dass die Überschrift dort bleibt, auch wenn der Rest entfernt wird. Da die Überschrift beibehalten werden muss, können Sie sie bei Bedarf mit einem weiteren Klick auf die Überschrift zurückholen.

Ich würde das gerne mit CSS/Javascript machen und ohne Angular.JS oder ähnlich, hat jemand von euch eine Lösung?

<div id="header"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3><br> 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
</div> 

Answer 1

Sie müssen Stoßen Ereignis auf Elemente klicken Sie nach dem Klicken auf klicken und eine Funktion ausgeführt werden soll. Ich habe die id-Eigenschaft zum image-Header hinzugefügt, um es mit Javascript abrufen zu können.

<div id="header"> 
 
    <img id="imageInHeader" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" onclick="hideMe()"></img><br> 
 
    <h3 onclick="showMe()">HEADING</h3><br> 
 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
 
</div> 
 

 
<script> 
 
function hideMe() { 
 
    document.getElementById('imageInHeader').style.display = 'none'; // removes the element from the layout 
 
    // document.getElementById('imageInHeader').style.visibility = 'hidden' // hides the element, doesn't affect layout 
 
} 
 

 
function showMe() { 
 
    document.getElementById('imageInHeader').style.display = 'block'; 
 
    // document.getElementById('imageInHeader').style.visibility = 'visible' 
 
} 
 
    
 
</script>

Answer 2

<div id="header" id="collapseThisDiv"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3> 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
</div> 
<div id="header" id="expandThisDiv"> 
    <img src="img/logo.png"></img><br> 
    <h3>HEADING</h3> 
</div> 

On ‚Bild‘ klicken, blenden Sie die oben div und zeigen die unteren div und umgekehrt ... So ist es nicht, dass die Überschrift erscheint auf jedem kollabiert ist Zeit.

Answer 3

check this out
, falls Ihr nicht in der Lage sind zu Änderungen in Ihrem HTML

$('#image').click(function() { 
 
    $("#header #image").css("display", "none"); 
 
    $("#header .text-muted").css("display", "none"); 
 
    
 
}); 
 
$('#header h3').click(function() { 
 
    if($("#header #image").css("display") == "none"){ 
 
    $("#header #image").css("display", "block") 
 
    } 
 
    if($("#header .text-muted").css("display") == "none"){ 
 
    $("#header .text-muted").css("display", "block") 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <img id="image" src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"></img><br> 
 
    <h3>HEADING</h3><br> 
 
    <blockquote class="form-text text-muted">Long Text in here</blockquote> 
 
</div>

Hoffnung zu machen dies Ihr Problem
Dank lösen