Expandable header

Developer
Ken Smith
Size
3,340 Kb
Views
12,144
  1. Expandable header Previews
  2. Expandable header HTML Codes
  3. Expandable header CSS Codes
  4. Expandable header JS Codes

How do I make an expandable header?

Clicking on the h4 headline reveal an image and text content. Testing as an alt to lightbox.. What is a expandable header? How do you make a expandable header? This script and codes were developed by Ken Smith on 04 November 2022, Friday.

Expandable header Previews
IQ Test

Expandable header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>expandable header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article id="main"> <div class="alpha">
<h3>Kwansan Cherry Trees - 1970</h3> <div class="beta"> <img class="aligncenter size-full wp-image-2756" src="http://wpbf.org/wp-content/uploads/2014/08/blossoms.jpg" alt="blossoms" width="419" height="500" />
<p>
One of WPBF’s earliest capital projects was planting more than 200 Kwanzan cherry trees on the grassy median of outer Mamaroneck Avenue as well as in groves in Tibbits Park on Broadway. Purchase price alone of each tree was $100. Funding for the Mamaroneck Avenue project came from donations, primarily memorials to loved ones and in honor of other respected individuals. A large bronze plaque inscribed with the names of those honored and remembered is attached to a boulder at the entrance to Leslie B. Gillie Park on Gedney Way. Years later, the groves in Tibbits Park inspired our annual cherry blossom festival in early May. These trees, in their protected park setting, have flourished and attained full height and are a beautiful spring spectacle. Although some remain, those along Mamaroneck Avenue, damaged through the years, have been gradually replaced by hardier varieties of flowering trees. We continue to plant them in protected areas, including a number in Turnure Park off Lake Street. </p> </div> </div>
<div class="alpha">
<h3>Malmud Parklet - 1973</h3>
<div class="beta">
<img class="aligncenter size-medium wp-image-2757" src="http://wpbf.org/wp-content/uploads/2014/08/49-1-theadore-malmud-family-garden-600x450.jpg" alt="49-1-theadore malmud family garden" width="600" height="450" />
<p>
In 1972, when the grand granite staircase of the old County Courthouse was being destroyed to widen Main Street, Robert Pollack, a WPBF board member, began exploring the possibility of saving the granite steps that were in excellent condition. (He estimated their value at $40,000.) Pollack convinced Ernie Pachianna, owner of Trumid Construction Co. to “recycle” the steps. The following year, the Malmud family expressed an interest in contributing to a parklet around a large copper beech tree on Quarropas Street where the old White Plains Public Library had been demolished.</p>
<p>
The tree, planted in 1900, had been saved in 1968 by tireless efforts of Theodora L. “Teddy” Russell, a WPBF founder and VP. The tree had been designated for removal to make way for a new courthouse and county parking garage. She succeeded in getting plans for the garage redesigned – at considerable cost.
A lovely garden was planted around it, and some of the rescued granite steps were installed as benches. (Other steps were used as benches elsewhere in the city.) Read more about the copper beech tree below (under the year 1981).</p>
</div>
</div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Expandable header - Script Codes CSS Codes

body { background: #eee; max-width: 75%; margin: auto; margin-top:1.5em;}
h3 { margin: 0;
}
#all-wrapper { font-family: Verdana, Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif; font-weight: 100; background: rgba(0,0,0,0.3); color: white; padding: 2rem; width: 100%; margin: 2rem; float: right;
}
.alpha { background: rgba(0,100,0,0.7); display: block; color: #fff; font-size: 2em; padding: 10px; border: 1px solid #999; margin: 0 0 10px;
}
.beta {margin:0;}
p { font-size: 1.2rem;}

Expandable header - Script Codes JS Codes

$('.beta').hide();
$('.alpha')
.css('cursor','pointer')
.click(function(){ $(this).find('.beta').slideToggle('fast');
});
Expandable header - Script Codes
Expandable header - Script Codes
Home Page Home
Developer Ken Smith
Username kensmith
Uploaded November 04, 2022
Rating 3
Size 3,340 Kb
Views 12,144
Do you need developer help for Expandable header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ken Smith (kensmith) Script Codes
Name
Device Orientation Demo
Caption Hover Effect Three
HTML5 Audio Load
7 Caption Hover Effects
Slide up captions from CSS-tricks
Image hover text
Adding a loader image to HTML5 video
CSS min-content
Device Orientation Demo02
CSS min-content 2 Height
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!