I am a beginner, so appreciate the patience on this one. I am trying to embed a really simple tab structure on my website. I'm not sure why it is not working. Here is the code below.
My guess it is something to do with the JS, but again, I am only really new to this.
Any help would be greatly appreciated! Thanks!
(I have used code found on CodePen for this)
<html lang="en" >
<head>
<script>$(function () {
var activeIndex = $('.active-tab').index(),
$contentlis = $('.tabs-content li'),
$tabslis = $('.tabs li');
// Show content of active tab on loads
$contentlis.eq(activeIndex).show();
$('.tabs').on('click', 'li', function (e) {
var $current = $(e.currentTarget),
index = $current.index();
$tabslis.removeClass('active-tab');
$current.addClass('active-tab');
$contentlis.hide().eq(index).show();
});
});</script>
<meta charset="UTF-8">
<title>CodePen - Simple tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
margin: 20px;
padding: 0;
list-style: none;
position: relative;
border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: none;
position: relative;
color: black;
}
.tabs .active-tab:after {
width: 100%;
height: 2px;
position: absolute;
content: "";
bottom: -0.1em;
left: 0;
background: white;
}
.tabs li {
display: inline-block;
cursor: pointer;
color: #3a5ea7;
padding: 5px 10px;
}
.tabs li:first-child {
margin-left: 10px;
}
.tabs-content {
margin: 20px;
padding: 0;
list-style: none;
}
.tabs-content li {
display: none;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="tabs">
<li class="active-tab">First tab</li>
<li>Second tab</li>
<li>Third tab</li>
</ul>
<ul class="tabs-content">
<li>Content of first tab</li>
<li>Content of second tab</li>
<li>Content of third tab</li>
</ul>
<!-- partial -->
</body>
</html>
There are lots of stuff happening there.
At first sight, you are not using JavaScript, you are using a library called JQuery, so you need to "import" it, otherwise that code won't work.
It must be placed before your JQuery code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I would recommend placing the code you've written at the bottom of the page, before the closing body tag
---> HERE
</body>
Improvements:
Separating your code into "modules" or smaller chunks.
Everything inside style tag, cut it and paste it in a new file, for example, style.css.
Everything inside script tag, cut it and paste it in a new file, for example, app.js.
After that import them, the JavaScript file, before the closing body tag, like mentioned before, and the css next to the others styles imports.
So, you'll end up with something like this:
Top of the page, inside head tag
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Bottom of the page, before closing body tag
...
<script src="./app.js"></script>
</body>
You can check which external sources are being used (like JQuery or Bootstrap) by clicking on the settings inside a Codepen environment. This particular script use JQuery, this can be imported in your <head> with a <script> tag using the online hosted version (CDN) or manually downloading it.
You can use this for now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
you can use this code for creating your simple tabs
(function() {
'use strict';
var tabMenus,
tabContents;
tabMenus = document.querySelectorAll('.tab_menu_item_link');
tabContents = document.querySelectorAll('.tab_content');
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < tabMenus.length; i++) {
tabMenus[i].className = 'tab_menu_item_link';
}
this.className = 'tab_menu_item_link is-active';
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].className = 'tab_content';
}
document.getElementById(this.dataset.id).className = 'tab_content is-active';
});
}
}());
body {
font-size: 14px;
line-height: 1.5;
color: #333;
}
ul , li {
padding : 0;
margin: 0;
list-style: none
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: bottom;
}
.clearfix {
display: table;
clear: both;
}
.container {
width: 400px;
margin: 0 auto;
padding: 50px 0;
background: #fff;
}
.tab_menu {
width: 100%;
}
.tab_menu_item {
float: left;
margin-right: 2px;
text-align: center;
}
.tab_menu_item:last-child {
margin-right: 0;
}
.tab_menu_item_link {
display: block;
width: 100px;
padding: 10px;
background: #fff;
border-radius: 5px 5px 0 0;
border: 1px solid #888;
border-bottom: none;
box-sizing: border-box;
color: #888;
transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
background: #888;
color: #fff;
}
.tab_container {
border: 1px solid #888;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_content.is-active {
display: block;
-webkit-animation: fade 0.5s ease;
animation: fade 0.5s ease;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="container">
<div class="tab">
<ul class="tab_menu clearfix">
<li class="tab_menu_item">About</li>
<li class="tab_menu_item">Works</li>
<li class="tab_menu_item">Contact</li>
</ul>
<div class="tab_container">
<div class="tab_content is-active" id="about">
<p>some content about ...</p>
</div>
<div class="tab_content" id="works">
<p>some content works ...</p>
</div>
<div class="tab_content" id="contact">
<p>some content contact ...</p>
</div>
</div>
</div>
</div>
you can see this sample in my codepen:
codepen.io
Related
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly
I could not find, for the life of me a jQuery less way to accomplish getting the value of the clicked li item and populating the textarea box id="result" with the clicked result.
How can this be done? This seems like rocket science to me.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover{
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}
</style>
<script type="text/javascript">
function showMenu(){
document.getElementById("one").style.display="block";
}
function hideMenu(){
document.getElementById("one").style.display="none";
}
</script>
</head>
<body>
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div>
<br>
<textarea id="result"></textarea>
</body>
</html>
This is my suggestion, though it's not tested in Internet Explorer:
// pick a name that's useful to you:
function textToTextArea (e) {
/* most browsers pass the event object to the function,
IE does, or did, not; here we use the passed-event if it's
available, or the window.event if it's not there (implying IE):
*/
e = e || window.event;
// finding out the text property we can access to retrieve an element's text:
var text = 'textContent' in document ? 'textContent' : 'innerText';
/* getting the textarea by its 'id',
and setting its innerHTML to be equal to the text of the clicked 'li':
*/
document.getElementById('result').innerHTML = e.target[text];
}
var list = document.getElementById('menu');
list.onclick = textToTextArea;
JS Fiddle demo.
Incidentally, in jQuery the above could be abbreviated to:
$('li').click(function(){
$('#result').val($(this).text());
});
JS Fiddle demo.
It's not always the best solution, but it saves a lot of time and handles cross-browser issues very well (saving us from normalizing for the event object); and while you don't (and shouldn't) have to justify not-using jQuery, sometimes it's worth remembering that there are other, more useful, things we can all be doing rather than simply avoiding it for arbitrary (and in this case unspecified) reasons.
DEMO jsFiddle
Description
This is a pure JavaScript answer, it uses the this on each li item. This event binding can be done in the window.onload event with a for loop if you'd prefer. It works on all browsers, the layout looks wrong to me but as that isn't the question I didn't care.
Let me know if you need more assistance.
HTML
<div id="container">
<div id="one" onclick="hideMenu()">
<ul id="menu">
<li onclick="itemPicked(this)">Item 1</li>
<li onclick="itemPicked(this)">Item 2</li>
</ul>
</div>
</div>
<div id="two">
<img src="http://realestatecommunities.com/wp-content/uploads/2011/01/blue-arrow-down.jpg" height="20px" width="20px" onclick="showMenu()" />
</div>
<br/>
<textarea id="result"></textarea>
JS
function showMenu() {
document.getElementById("one").style.display = "block";
}
function hideMenu() {
document.getElementById("one").style.display = "none";
}
function itemPicked(el) {
document.getElementById("result").value = el.textContent;
}
CSS
#container {
width: 200px;
float: left;
font-family: Arial;
font-size: 10pt;
position:relative;
}
#one {
height: 200px;
border: 1px solid red;
display: none;
position:absolute;
background: #C0C0C0;
}
#two {
width: 8px;
height: 8px;
border: 1px solid blue;
float: left;
position:absolute;
}
#menu, ul {
list-style: none;
margin: 0;
cursor: default;
width:194px;
padding:6px;
}
#menu, ul, li {
padding: 2px;
}
#menu li:hover {
background: blue;
color: #fff;
}
#result {
border: 1px solid #000;
width: 206px;
}