We Keep Coding

HTML CSS trying to create an input field which appears over text

I am working on creating a project in which there are multiple cards created with bootstrap. Each card has a header, a body, and a footer. When the card is clicked on I want to an input field to appear in the header, footer, and body. This input field should appear over the current text.
I have no issue toggling the class, however I am struggling to get my input fields to line up over the text.
Here is the HTML structure:
`<div class='card-deck col-3' id='deck'>
<div class='card grow'>
<div class='card-header par'>
<h3 class='target'>${tasks.task}</h3>
<input id='updateTask' placeholder='Task'>
</div>
<div class='card-body par'>
<h6 class='target'>Due by: ${newDate}</h6>
<input id='updateDate' placeholder='Date'>
</div>
<div class='card-footer par'>
<h6 class='target'> Priority: ${tasks.priority}</h6>
<input class='update' id='updatePriority' placeholder='Priority'>
</div>
</div>
</div>`
Here is my JS to toggle the classes:
let card = $(this)
card.children('.par').children('.update').toggleClass('hidden');
card.children('.target').toggleClass('remove');
Lastly here is the CSS I currently have:
.par{
position: relative;
}
#updateTask, #updateDate, #updatePriority{
position: relative;
z-index: 999;
}
.hidden{
display: none;
z-index:-999;
}
I set the class 'par' which houses each set of inputs and text to relative.
Then I set the input fields to absolute. I have tried many combos of positioning and div restructuring but I have not been able to successfully stack my input field over its respective text.
Unfortunately the JSfiddle does not run because I am using bootstrap in my project.

We gonna use the funcion each, for each element we gonna apply the call "toggleClass".
$('#deck input').each(function(index, element){
$(element).toggleClass('hidden');
});
Just get all .target from #deck and remove it.
$('#deck .target').remove();
About your class, .hidden display:none will be good but the z-index property cannot be used without the position property. (only works on positioned elements (position:absolute, position:relative, or position:fixed) https://www.w3schools.com/cssref/pr_pos_z-index.asp )

How to ignore anchor if button is clicked within the anchor element

I have a situation where clicking on an image will direct the user to a certain link, but pressing a button that is shown within an image will run a javascript method instead. However, I cannot prevent the page from redirecting to the certain link when the button is pressed (the javascript method is also run when the button is clicked).
I have found out that button cannot be nested within an anchor element, and tried to wrap the button within a form as well, but no luck.
Does anyone know a way around such problem?
the basic logic in code looks like this
<a href="an item description link">
<img src="an item image"/>
<form style="display: inline" action="html_form_action.asp" method="get">
<button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
</form>
</a>
Thanks in advance for any help!

A straightforward way that validates would be just superimposing the button over the link. This requires the link and the button to be in the same containing element, and for both of them to use position: absolute:
HTML
<div class="box">
<a href="http://example.com">
<img src="http://placehold.it/300x200">
</a>
<button>AAAAA</button>
</div>
CSS
.box {
box-sizing: content-box;
width: 300px;
height: 200px;
border: thin solid black;
}
.box > a {
display: block;
position: absolute;
}
.box > button {
position: absolute;
}
See it in action on CodePen: http://codepen.io/millimoose/pen/avYLjQ
The button will automatically be stacked over the preceding link. (This is specified behaviour.) And it will handle clicks before they can be passed to elements underneath is.
That said, this solution has a few downsides. You'll have to give a fixed size to the container; it can't be sized automatically to fit its contents, because its contents are outside of the rendering flow. This also means they won't automatically fill their parent box unless you set their size explicitly again.

How do you move two images to the left and right in a div element?

I am using HTML, and I am trying to make a part of a webpage where I have a textbox in the center of the screen and five images surrounding the textbox.
I am able to place three images above the box, but when I try to place an image to the left and to the right of the textbox, the images seem to be "stuck" in the center of the page. All this is in a div element.

Easiest way to do this is with grid system. In example if you use Bootstrap grid system you can do it like this:
<div class="wrapper">
<div class="row">
<div class="col-md-4"><img src="source" alt="something" ></div>
<div class="col-md-4">Textbox</div>
<div class="col-md-4"><img src="source" alt="something" ></div>
</div>
You can also do it without grid system like Gerasimos answer.

Try using the CSS position property if this doesn't work try entering this code in your style sheet:
#left-image { position: absolute; left: 10px}
#right-image { position: absolute; right: 10px}

jQuery Simple Collapsible Div?

I am looking for the proper, simple, small code to do the following things:
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
<div class="sitesection">
<p class="expand-one">Click Here To Display The Content <img src="images/arrow.png" width="5" height="7" /></p>
<p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.

$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Demo: http://jsfiddle.net/Q4PUw/2/

I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
http://jsfiddle.net/MB4ch/1/

I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
https://jsfiddle.net/Q4PUw/3767/

Bad idea to use accordion.
Better is to create your own collapsible block.
Example:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
<div class="HiderContainer">
More
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.

HR tag stays hidden while containing div is shown with jquery

I have a hidden div which I reveal with the jquery fadein() method:
$("#panel").fadeIn("slow");
and here's the html:
<div id="panel" style="display:none;">
<hr/>
<p>text</p>
<button onclick="cancel()">cancel</button>
</div>
The text and the button within the panel is shown properly when the method is called but the hr stays hidden. Its display property is none according to firebug.
Why the HR is not shown together with the other elements? It's jquery 1.3.2

I copied your markup and jQuery, and it fades in fine for me. However, if I add the following CSS rule, it does not fade in correctly...
hr { display: none; }
So you must have this rule somewhere. Remove it and your fade will work as expected.