I am having trouble getting this jQuery code to function properly. Within a div, there is a paragraph that I want to hide when a specific button is clicked and show when another button is clicked.
$("#details").on("click", function () {
$(".cont").hide();
$("#content").text("some text");
});
$("#description").on("click", function () {
$("#content").empty();
$("p.cont").show();
});
If you're looking to simplify your coding process, consider using a jQuery plugin instead of writing the code from scratch.
Check out JQuery UI, which is highly effective for tasks like this. Take a look at their tabs section here:
If you only need it for Tabs, you can customize and download it from here to reduce unnecessary code on your page:
http://jqueryui.com/download/#!version=1.10.3&components=1100000000000000001000000000000000
The reason why you're not seeing anything is because you are clearing the content of the #content div before attempting to display its child elements:
$("#content").empty();
This code snippet removes everything inside the selected element. As a result, if you check for the length of $("p.cont") immediately after emptying it, it will be 0 since there are no longer any paragraphs left. To address this, consider changing the text within the element instead of emptying it completely.
If you decide to create your own tab script, there are numerous ways to address the issue using jQuery. Here is a sample approach:
(http://jsfiddle.net/ruqmU/5/)
CSS
.tab {
float:left;
display:inline-block;
border:1px solid #000;
padding:.5em;
}
#contentArea {
border: 1px solid #000;
padding:.5em;
clear: both;
}
.block {display:block;}
.hide {display:none;}
.selectedTab {background-color:red;}
Javascript (jQuery)
$(document).ready(function() {
// default first tab to visible
$('.content').addClass('hide');
$('.content').first().removeClass('hide').addClass('block');
$('.tab').first().addClass('selectedTab');
// on click, hide all content except content matching the clicked tab
$('.tab').click(function() {
if(!$(this).hasClass('selectedTab')) {
var tabContentType = $(this).children('p').attr('class');
$('.tab').removeClass('selectedTab');
$(this).addClass('selectedTab');
$('div.content').addClass('hide');
$( '.' + tabContentType ).parent().removeClass('hide').addClass('block');
}
});
});
HTML
<div id="tabArea">
<div class="tab">
<p class="details">details</p>
</div>
<div class="tab">
<p class="description">description</p>
</div>
</div>
<div id="contentArea">
<div class="content">
<p class="details">details go here</p>
</div>
<div class="content">
<p class="description">description goes here</p>
</div>
</div>
I am looking to create a recipe maker webapp for practice purposes. This webapp will consist of 2 main pages: the index page and the recipes page. On the "index" page, users can create their own recipes. On the "recipes" page, users can view a table ...
I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...
I am looking to update the required value of an input based on a checkbox selection. Here is my current code, any assistance would be appreciated. <input type="checkbox" id="no_land_line" name="no_land_line" value=""> // check this box if no land li ...
I am looking to create a slideshow for my banner that changes automatically. The banners are located in a folder, and I want the website to display them one by one without manual intervention. Currently, I have managed to display the images from the folder ...
I am a newcomer to web development and currently working on a website for a massage therapist using bootstrap. However, I am facing an issue where my CSS styles are not displaying correctly on mobile devices. The backgrounds and bootstrap navbar disappear, ...
Below is a simplified version of my code: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body style="font-size: 36px"> </body> </html> <html> ...
I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...
I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...
I am working with a partial file named _display.scss. It includes various @mixin and styling classes related to the display CSS property. _display.scss @mixin d-block{ display: block; } @mixin d-none{ display: none; } .d-block{ @include d- ...
I have generated a JSON in a specific format from an external PHP file: [ { "title": "Welcome!", "description": "The world has changed dramatically..", "image": "img/strawberry-wallpaper.jpg" } ] I am trying to use this data to populate a par ...
Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...
One issue I am facing is capturing the selected user option and sending that value in a post request. Let's put aside the post part since it's not directly related to the main question at hand. Currently, the value is showing up as undefined. ...
Looking at the content in this div, it seems that the top is positioned higher than the bottom. Can anyone provide some guidance on how to fix this? .dtestContactDet{ border-bottom:1px solid #D7D7DE; border-bottom:1px solid #D7D7DE ; -khtml-border-bo ...
I'm currently working on a project that involves creating a "Twitter" page. The idea is to utilize the JSON file available at to display some of its content. However, I'm facing an issue where my page only shows the table headers and nothing els ...
This is the CSS caption effect I am using: .cell { position: relative; width: 180px; height: 180px; } .caption {} .cell .caption { opacity: 0; text-decoration-color: gray; text-align: center; background: #eaeaea; position: absolute; fo ...
Struggling to implement a Nav-drawer that should open when a checkbox is selected, everything seems to be set up correctly but the issue arises when it comes to actually opening it. Here is the code snippet: <div class="leftside"> <input typ ...
I've got a quick query. How can I assign an object's property to the href attribute? I've indicated the line with a comment. success: function (listOfTags) { let tagData = ''; $.each(listOfTags, function (i, tag) { ...
I am currently facing an issue with a form that includes a tinymce textarea, allowing users to edit text and save it into a database with HTML tags for display on their profile. The problem arises when Laravel 4.2 escapes the HTML tags, making it difficult ...
Upon hard refreshing the page in the middle section, there seems to be an issue with the paroller js transform: translateY(); CSS effect not functioning properly on the <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" da ...
Struggling with examples from the jquery documentation, I find it difficult to add a div before a specific list item and then close it after another using different classes for each li element. The prependTo and append functions don't seem to work as ...