How to insert css arrow into html page and make it clickable

StackOverflow https://stackoverflow.com/questions/22510948

  •  17-06-2023
  •  | 
  •  

Frage

Hello guys I'm making a FAQ page for a project in my uni, and I've got everything working, but I wanted to make it look nicer. I made an arrow into a css file, and I wanted to put it into my html. In my html there are headers which have a button that shows and hide the content thanks to jQuery. My question is: how can I put the arrow in each header and make it clickable so I can delete the button and by clicking the header it self will display the content?

Thanks for your help

Here is my CSS:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .body
    {
    padding: 10px 6px;
    height: 0;
    background: #ff4400;
    display:inline-block;
    margin:0 0 0 -4px;
    z-index:999;
    }

    .arrow
    {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #ff4400;
    display: inline-block;
    margin: 0 0 0 -5px;
    }

    </style>
    </head>

    <body>

    <div class="body"></div>
    <div class="arrow"></div>

    </body>
    </html>

This is my html file

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $(".button").click(function () {
           var div= $("#"+this.value);
      div.toggle("slow").siblings().hide("slow");
    });
    });  
    </script>
    </head>
    <body>
    <title>FAQ</title>
    <h><font size="7">FAQ</font><font size= "5.5">Most frequently asked questions</font></h>
    <div id="buttonDiv"></div>    

    <!-- setting BUTTON 1-->
    <h1><font size="5">QUESTION 1</font><button id="button1" type="button" class="button" value="Show1">Show/Hide</button></h1>
    <!--------------------QUESTION 1 --------------------------------------------->  

    <div>
      <div id="Show1" style="display:none">
        Answer to the question 1
     </div>   
    </div>


    </body>
    </html>
War es hilfreich?

Lösung

JS:

$(document).ready(function(){
    $(".button").click(function () {
       var div= $("#"+this.name);
  div.toggle("slow").siblings().hide("slow");
});
});

HTML:

<h1>
    <div class="arrow"></div>

    <a class="button" name="Show1" href="#">
        <font size="5">QUESTION 1</font>
    </a>
</h1>

<div id="Show1" style="display:none">
    Answer to the question 1
</div>

Demo: http://jsfiddle.net/788NK/6/

Hope is what you need.

Andere Tipps

Not sure what your problem is and you are showing two different html pages

$(".arrow").on("click",function() {
    alert("Clicked");
});

using 

cursor:pointer

worked for me here:

Live Demo

Using your comments, look here

Live Demo

$(document).ready(function(){
  $(".clickable").on("click",function() {
    val = $(this).data("val");  
    var div= $("#"+val);
    div.toggle("slow").siblings().hide("slow");
  });
});

and do not use ID but class and value is illegal, use data-val:

<h1 class="clickable" data-val="Show1"><div class="body"></div><div class="arrow"></div>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top